webpack打包工具的使用

webpack可以根据你的前端项目依赖关系和加载规则来把项目打包压缩的工具，了解webpack之前需要对nodeJS有一定的了解，尤其是模块化的原理，因为webpack是基于node开发的一个npm包，正是node的快速发展，commonJS规范的制定，根据包管理规范和模块化的应用才让webpack能在项目中根据依赖关系解析并打包

一. 首先要了解package.json文件的含义

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。可以说package.json文件就是项目包的名片。

较重要的是scripts字段

一般有两种开发环境项目的配置，一种是直接webpack命令

"dev": "cross-env NODE_ENV=development webpack-dev-server --host 192.168.20.21 --open --inline --hot",

  "build": "webpack --config config.js --progress --hide-modules"

}

另一种是通过node来自己创建服务,利用webpack-dev-middleware插件

"scripts": {

"start": "node server.js",

  "build:webpack": "cross-env NODE_ENV=production webpack --display-chunks -c --config webpack.config.prod.js",

  "build": "npm run build:webpack",

  "precommit-msg": "echo 'Pre-commit checks...' && exit 0",

  "lint": "babel-node lint.js",

  "test": "echo \"Error: no test specified\"&& exit 1"

}

http://javascript.ruanyifeng.com/nodejs/packagejson.html
一般项目会分为开发环境和生产环境，这两种环境需求不一样所以配置也有差别，所以可能需要有两份配置文件，或者根据全局变量控制做不同配置，不过我个人还是倾向分开。
二. webpack配置文件

1. entry：分为三种，字符串（一个入口文件）、数组（一个入口多个文件且无关联）、对象（多入口多页面）

  entry : {index: './src/main.js', index2: './src/main2.js'},//入口文件 index， index2

2. output:

output : {//输出文件
    filename : 'js/[name].js',//输出文件名
    // publicPath: '',//添加静态资源, 否则会出现路径错误
    chunkFilename: 'js/[name].js',//CommonsChunkPlugin提取的公共文件
    path : __dirname//输出文件路径
  },

3. module: 设置对应文件对应解析loader

  module : {
  rules: [
    {test: /.js$/, use: ['babel-loader']}, // js转es5
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        // cssModules: {
        //   localIdentName: '[path][name]---[local]---[hash:base64:5]',
        //   camelCase: true
        // }
      }
    },
    { test: /\.(eot|woff|ttf)$/, loader: 'file-loader' },
    //{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
    {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
    //{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
        name: 'img/[name].[hash:8][ext]'
      }
    },
    {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
  ]
},

4. resolve: 降低路径和扩展名的复杂度

    resolve: {
       alias: {
         'vue$': 'vue/dist/vue.common.js',//引用vue时, 创建 import 或 require 的别名，来确保模块引入变得更简单, $表示 精确匹配
         extensions: [".js", ".json"] //自动解析确定的扩展，当前为默认值
         }
     },

5. devtool: 我们在使用 webpack 打包我们的工程模块时，经常会需要 devtool 开启 sourceMap 让我们可以调试代 码，但是 webpack 文档中关于 devtool 给出了7种模式 https://juejin.im/post/58293502a0bb9f005767ba2f

    ```
      devtool: '#eval-source-map',
    ```
   

6. plugins: 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务,webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

       plugins: [
           CommonsChunkPlugin, //提取公共文件
           new ExtractTextPlugin('css/[name].css'),
           new HtmlWebpackPlugin({
               filename: 'index.html',
               template: 'index.html',
               chunks: ['common', 'index']
           }),
           new HtmlWebpackPlugin({
                 filename: 'index2.html',
                 template: 'index2.html',
                 chunks: ['common', 'index2']
           })
         ]//插件集合