从零开始搭建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官网5秒搭建一个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')