从零开始搭建webpack应用
最近研究webpack配置神烦，打包工具指不定哪天又要被取代。要想自己手动搭一个复杂应用的webpack脚手架不是一件容易的事, 看看vue-cli的webpack配置文件就有8+个，使用的插件有14+个，代码800行＋。还没开始写代码就要搞懂这么多“规则”，还不如多花点时间研究js核心，哪天可以自己倒腾工具。为了重复踩坑，还是记录下来适应这些规则的过程，通常工具文档通常不会涵盖这些内容。不做工具构建工程师，但要利用工具。
一、环境准备(作者是windows环境)
1.1. 安装node
安装node，前往官网，node自带npm。安装完成打开cmd输入下面的指令检查是否安装成功：
node -v npm -v
error1 ：node 指令没反应
解决：删除npm目录中的npmrc文件。
1.2. 初始化项目
运行npm init 根据提示初始化一个项目，生成package.json文件
注意：项目根目录的文件夹名称不能使用空格，否则项目会报错。
error1 ：npm 指令没反应
解决：删除npm目录中的npmrc文件。
error2 : 全局安装报错：没有权限
解决： 注意把nodePATH改在有权限的地方，否则后续使用命令行全局安装包可能会有权限问题。
- 查看全局安装默认路径：
npm config get prefix - 修改全局安装默认路径：
npm config set prefix 'C:UsersAdministrator
ode
ode_global' (文件夹自己建好，确保路径有权限)
npm config set cache 'C:UsersAdministrator
ode
ode_global' (文件夹自己建好，确保路径有权限)
- 再次查看全局安装默认路径
- 修改环境变量
- 用户变量-
NODE PATH和PATH中添加： C:UsersAdministrator ode ode_global - 系统变量-
PATH中添加： C:UsersAdministrator ode ode_global
- 用户变量-
- 重启cmd, path才会生效
error3 ：unexpected token ｛ ｝in json at position 403
解决：删除pakage.json.lock文件。
二、包的管理
2.1. 安装yarn
建议安装yarn！npm 有坑，不利于版本控制，安装 yarn官方文档。安装使用指令：
yarn init // 初始化项目，生成yarn.lock文件 yarn add [pakeage] --dev // --dev 只在开发环境下使用的插件 yarn (install) // 安装lock文件中所有的依赖
error1 : 安装了yarn, 运行yarn install报错无法使用！
解决：把yarn安装文件夹下的bin文件夹加到环境变量。
2.2. 安装cnpm，npm国内镜像 (可选)
npm install -g cnpm --registry=https://registry.npm.taobao.org
三、脚手架搭建
3.1 vue-cli 脚手架迅速搭建
- 全局安装：
npm install -g vue-cli; - 查看是否安装成功：
vue -V; - 初始化项目：
vue init webpack my-project; - 不要用
nigt watch,里面的demo依赖google的资源，国内无法使用，启动项目会报错, 官网说明:The test below navigates to google.com and searches for "rembrandt van rijn", then verifies if the term first result is the Wikipedia page of Rembrandt。
3.2 不使用vue-cli 简易搭建webpack项目可参考
-
安装webpack，
npm install --save-dev webpack -
配置
webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/app.js',（主文件自己定义）
output: {
path: path.resolve(__dirname, 'bin'),
filename: 'app.bundle.js'
}
};
-
配置本地服务 安装客户端服务器
npm install webpack-dev-server；项目启动
webpack-dev-server --content-base build/；
四、安装各种需要的包
4.1. 常用包传送门
4.2. 安装指令
仅在开发环境使用的包： npm install --save-dev babel-loader 生产环境也要使用的包：npm install --save jquery babel-polyfill
4.3. 编译ES6或以上，使用babel（react也支持）
- cnpm install --save-dev babel-cli babel-preset-env
- cnpm install --save-dev babel-loader
- npm install --save-dev babel-polyfill
Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.
4.4. creat a .babelrc 文件（若已经生成，则无需创建）
{
"presets": ["env"]
}
五、一些有用的配置
5.1 接口转发 proxytable
在开发环境中，通过设置地址映射将复杂的url简化，还可以解决跨域问题
// config/index.js
proxyTable: {
'/api': { //将请求路径中包含api全部转发到下面配置的target路径中
target: 'http://127.0.0.1:3000', // 你接口的域名或ip
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
}
}
5.2 生产环境URL配置化（开发环境、线上）
let devUrl = 'api/asset/'; //与上面proxytable中配置的api路径匹配 let proUrl = 'https://node.xxxx.com/asset/'; (curEnv == "production") ? (baseUrl = proUrl) :( baseUrl = devUrl);
5.3. 模块按需加载
使用vue-cli构建的项目,在 默认情况下 ,执行npm run build会将所有的js代码打包为一个整体， 打包位置是 dist/static/js/app.[contenthash].js ,这个文件是非常大,可能好几兆，加载很慢。
在路由文件中引入模块时分模块打包，把我们想要组合在一起的组件打包到一个chunk块中去，使用webpack的 require.ensure,并且在最后加入一个chunk名，相同chunk名字的模块将会打包到一起。
router/index.js
const lotteryIndex = r => require.ensure([], () => r(require('@/pages/lottery/lottery-index.vue')), 'chunk1')
const drawList = r => require.ensure([], () => r(require('@/pages/lottery/draw-list.vue')), 'chunk2')
const drawDetail = r => require.ensure([], () => r(require('@/pages/lottery/draw-detail.vue')), 'chunk3')