从零开始搭建webpack应用

从零开始搭建webpack应用

最近研究webpack配置神烦，打包工具指不定哪天又要被取代。要想本身手动搭一个复杂应用的webpack脚手架不是一件容易的事, 看看vue-cli的webpack配置文件就有8+个，使用的插件有14+个，代码800行＋。还没开始写代码就要搞懂这么多“规则”，还不如多花点时间研究js核心，哪天能够本身倒腾工具。为了重复踩坑，仍是记录下来适应这些规则的过程，一般工具文档一般不会涵盖这些内容。不作工具构建工程师，但要利用工具。

1、环境准备(做者是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:\Users\Administrator\node\node_global' (文件夹本身建好，确保路径有权限)

npm config set cache 'C:\Users\Administrator\node\node_global' (文件夹本身建好，确保路径有权限)

• 再次查看全局安装默认路径
• 修改环境变量
  • 用户变量- NODE PATH 和 PATH中添加： C:\Users\Administrator\node\node_global
  • 系统变量-  PATH中添加： C:\Users\Administrator\node\node_global
• 重启cmd, path才会生效

error3 ：unexpected token ｛ ｝in json at position 403

解决：删除pakage.json.lock文件。

2、包的管理

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、脚手架搭建

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、安装各类须要的包

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、一些有用的配置

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')