vue-cli+webpack打包配置

2023-02-14 18:11:08

vue-cli+webpack打包配置

一：目录结构：

├── README.md

├── build

│   ├── build.js

│   ├── check-versions.js

│   ├── utils.js

│   ├── vue-loader.conf.js

│   ├── webpack.base.conf.js

│   ├── webpack.dev.conf.js

│   └── webpack.prod.conf.js

├── config

│   ├── dev.env.js

│   ├── index.js

│   ├── test.env.js

│   └── prod.env.js

│

├── index.html

├── package.json

├── src

│   ├── App.vue

│   ├── assets

│   │   └── logo.png

│   ├── components

│   │   └── HelloWorld.vue

│   │── router

│   │    └── index.js

│   └── main.js

├── static

├── .babelrc

├── .editorconfig

├── .eslintignore

├── .eslintrc.js

├── .gitignore

├── .postcssrc.js

二：指令分析：

2-1 先看 package.json 里面的scripts的字段

"scripts": {

  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

  "start": "npm run dev",

  "unit": "jest --config test/unit/jest.conf.js --coverage",

  "test": "npm run unit",

  "lint": "eslint --ext .js,.vue src test/unit/specs",

  "build": "node build/build.js"

}

运行 npm run dev 后，会执行开发环境打包，就会执行 build文件夹下的 webpack.dev.conf.js代码，运行 npm run build后，
会进行正式环境打包，执行build/build.js文件代码。我们首先来看下 webpack的配置。

三：webpack配置

3-1 webpack.base.conf.js

入口文件 entry 代码如下：

entry: {

  app: './src/main.js'

}

输出文件 output 代码如下：

output: {

  path: config.build.assetsRoot,  // 导出目录的绝对路径 在项目的根目录下 会新建dist文件夹

  filename: '[name].js',  // 导出文件的文件名

  publicPath: process.env.NODE_ENV === 'production'

    ? config.build.assetsPublicPath

    : config.dev.assetsPublicPath

}

如上代码 config; 在页面上引入代码： const config = require('../config'); 我们可以打开config下的index.js查看下代码就可以明白
了，如果是正式环境 publicPath = config.build.assetsPublicPath，如果是开发环境 publicPath = config.dev.assetsPublicPath；publicPath 是虚拟目录，自动指向path编译的目录。比如在正式环境打包会生成

dist

  static

    css

    js

    index.html

生成如上的目录，那么设置 publicPath 为 './', 那么在index.html引入的路径就变为 ./css/xx.css, js路径变为 ./js/xx.js
, 直接打开index.html就可以访问到 css 和对应的js的。
如果是开发环境，设置 publicPath为 '/'，那么在开发环境访问页面; 比如 http://localhost:8080; 那么js路径就是
http://localhost:8080/app.js了；

文件解析 resolve (主要设置模块如何被解析)

// 设置模块如何被解析

resolve: {

  // 自动解析确定的扩展名，导入模块时不带扩展名

  extensions: ['.js', '.vue', '.json'],

  // 创建import 或 require的别名

  /*

   比如如下文件

   src

     components

       a.vue

     router

       home

         index.vue

    在index.vue里面，正常引用A组件；如下：

    import A from '../../components/a.vue';

    如果设置了 alias后，那么引用的地方可以如下这样了

    import A from '@/components/a.vue';

    注意：这里的 @ 起到了 resolve('src')路径的作用了。

  */

  alias: {

    'vue$': 'vue/dist/vue.esm.js',

    '@': resolve('src')

  }

}

模块解析module (处理项目不同类型的模块)

module: {

  rules: [

    // 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。

    ...(config.dev.useEslint ? [createLintingRule()] : []),

    {

      test: /\.vue$/,  // vue 文件后缀的

      loader: 'vue-loader', // 使用vue-loader处理

      options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码

    },

    {

      test: /\.js$/, // js文件后缀的

      loader: 'babel-loader', // 使用babel-loader处理

      include: [resolve('src'), resolve('test')] // 包含src和test的文件夹

    },

    {

      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀

      loader: 'url-loader',  // 使用url-loader处理

      options: {

        limit: 10000,  // 图片小于10000字节时以base64的方式引用

        name: utils.assetsPath('img/[name].[hash:7].[ext]')  // 文件名为name.7位hash的值.扩展名

      }

    },

    {

      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,  // 音频文件后缀

      loader: 'url-loader',

      options: {

        limit: 10000, // 小于10000字节时的时候处理

        name: utils.assetsPath('media/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名

      }

    },

    {

      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件

      loader: 'url-loader',

      options: {

        limit: 10000, // 字体文件小于10000字节的时候处理

        name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名

      }

    }

  ]

}

webpack.base.conf.js代码如下：

'use strict';

const path = require('path');

const utils = require('./utils');

const config = require('../config');

const vueLoaderConfig = require('./vue-loader.conf');

function resolve (dir) {

  return path.join(__dirname, '..', dir);

}

/*

 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。

*/

const createLintingRule = () => ({

  test: /\.(js|vue)$/,

  loader: 'eslint-loader',

  enforce: 'pre',

  include: [resolve('src'), resolve('test')],

  options: {

    formatter: require('eslint-friendly-formatter'),

    emitWarning: !config.dev.showEslintErrorsInOverlay

  }

});

module.exports = {

  entry: {

    app: './src/main.js'

  },

  output: {

    path: config.build.assetsRoot, // 导出目录的绝对路径

    filename: '[name].js', // 导出文件的文件名

    publicPath: process.env.NODE_ENV === 'production'

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

  },

  // 设置模块如何被解析

  resolve: {

    // 自动解析确定的扩展名，导入模块时不带扩展名

    extensions: ['.js', '.vue', '.json'],

    // 创建import 或 require的别名

    /*

     比如如下文件

     src

       components

         a.vue

       router

         home

           index.vue

      在index.vue里面，正常引用A组件；如下：

      import A from '../../components/a.vue';

      如果设置了 alias后，那么引用的地方可以如下这样了

      import A from '@/components/a.vue';

      注意：这里的 @ 起到了 resolve('src')路径的作用了。

    */

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src')

    }

  },

  module: {

    rules: [

      // 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。

      ...(config.dev.useEslint ? [createLintingRule()] : []),

      {

        test: /\.vue$/,  // vue 文件后缀的

        loader: 'vue-loader', // 使用vue-loader处理

        options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码

      },

      {

        test: /\.js$/, // js文件后缀的

        loader: 'babel-loader', // 使用babel-loader处理

        include: [resolve('src'), resolve('test')] // 包含src和test的文件夹

      },

      {

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀

        loader: 'url-loader',  // 使用url-loader处理

        options: {

          limit: 10000,  // 图片小于10000字节时以base64的方式引用

          name: utils.assetsPath('img/[name].[hash:7].[ext]')  // 文件名为name.7位hash的值.扩展名

        }

      },

      {

        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,  // 音频文件后缀

        loader: 'url-loader',

        options: {

          limit: 10000, // 小于10000字节时的时候处理

          name: utils.assetsPath('media/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名

        }

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件

        loader: 'url-loader',

        options: {

          limit: 10000, // 字体文件小于10000字节的时候处理

          name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名

        }

      }

    ]

  },

  node: {

    // prevent webpack from injecting useless setImmediate polyfill because Vue

    // source contains it (although only uses it if it's native).

    setImmediate: false,

    // prevent webpack from injecting mocks to Node native modules

    // that does not make sense for the client

    dgram: 'empty',

    fs: 'empty',

    net: 'empty',

    tls: 'empty',

    child_process: 'empty'

  }

};

对webpack.base.conf中的 const vueLoaderConfig = require('./vue-loader.conf');
vue-loader.conf.js 代码如下：

'use strict';

const utils = require('./utils');

const config = require('../config');

// 判断是否是生产环境

const isProduction = process.env.NODE_ENV === 'production';

const sourceMapEnabled = isProduction

  ? config.build.productionSourceMap

  : config.dev.cssSourceMap;

module.exports = {

  // 处理 .vue文件中的样式

  loaders: utils.cssLoaders({

    // 是否打开 source-map

    sourceMap: sourceMapEnabled,

    // 是否提取样式到单独的文件

    extract: isProduction

  }),

  cssSourceMap: sourceMapEnabled,

  cacheBusting: config.dev.cacheBusting,

  transformToRequire: {

    video: ['src', 'poster'],

    source: 'src',

    img: 'src',

    image: 'xlink:href'

  }

};

3-2 webpack.dev.conf.js

开发环境下的 webpack配置，通过merge方法合并 webpack.base.conf.js 基础配置。
一些代码如下：

'use strict';

const utils = require('./utils');

const webpack = require('webpack');

const config = require('../config');

// webpack-merge是一个可以合并数组和对象的插件

const merge = require('webpack-merge');

const baseWebpackConfig = require('./webpack.base.conf');

module.exports = merge(baseWebpackConfig, {}）

模块配置

module: {

  // 通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMap

  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

}

在utils.styleLoaders中的配置如下

/*

 生成style-loader的配置

 style-loader文档：https://github.com/webpack/style-loader

 @method styleLoaders

 @param {Object} options生成的配置

 @return {Array} style-loader的配置

*/

exports.styleLoaders = function (options) {

  const output = []; // 定义返回的数组，数组中保存的是针对各类型的样式文件的处理方式

  const loaders = exports.cssLoaders(options); // 调用cssLoaders方法返回各类型的样式对象(css: loader)

  for (const extension in loaders) { // 循环遍历loaders

    const loader = loaders[extension]; // 根据遍历获得的key(extension)来得到value(loader)

    output.push({

      test: new RegExp('\\.' + extension + '$'), // 处理的文件类型

      use: loader  // 用loader来处理，loader来自loaders[extension]

    });

  }

  return output;

};

上面的代码中调用了exports.cssLoaders(options),用来返回针对各类型的样式文件的处理方式
如下代码：

/*

 * 生成处理css的loaders配置

 * @method cssLoaders

 * @param {Object} options 生成的配置

 options = {

   // 是否开启 sourceMap

   sourceMap: true,

   // 是否提取css

   extract: true

 }

 @return {Object} 处理css的loaders的配置对象

*/

exports.cssLoaders = function (options) {

  options = options || {};

  const cssLoader = {

    loader: 'css-loader',

    options: { // options是loader的选项配置

      // 根据参数是否生成sourceMap文件 生成环境下压缩文件

      sourceMap: options.sourceMap

    }

  };

  const postcssLoader = {

    loader: 'postcss-loader',

    options: {

      sourceMap: options.sourceMap

    }

  };

  // generate loader string to be used with extract text plugin

  /*

   生成ExtractTextPlugin对象或loader字符串

   @method generateLoaders

   @param {Array} loader 名称数组

   @return {String | Object} ExtractTextPlugin对象或loader字符串

   */

  function generateLoaders (loader, loaderOptions) { // 生成loader

    // 默认是css-loader

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];

    if (loader) { // 如果参数loader存在

      loaders.push({

        loader: loader + '-loader',

        options: Object.assign({}, loaderOptions, { // 将loaderOptions和sourceMap组成一个对象

          sourceMap: options.sourceMap

        })

      });

    }

    // Extract CSS when that option is specified

    // (which is the case during production build)

    // 当extract为true时，提取css，生成环境中，默认为true

    if (options.extract) {  // 如果传入的options存在extract且为true

      return ExtractTextPlugin.extract({  // ExtractTextPlugin分离js中引入的css文件

        use: loaders, // 处理的loader

        fallback: 'vue-style-loader' // 没有被提取分离时使用的loader

      });

    } else {

      return ['vue-style-loader'].concat(loaders);

    }

  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html

  // 返回css类型对应的loader组成的对象 generateLoaders()来生成loader

  return {

    css: generateLoaders(),

    postcss: generateLoaders(),

    less: generateLoaders('less'),

    sass: generateLoaders('sass', { indentedSyntax: true }),

    scss: generateLoaders('sass'),

    stylus: generateLoaders('stylus'),

    styl: generateLoaders('stylus')

  };

};

在styleLoaders函数内执行 const loaders = exports.cssLoaders(options); 调用cssLoaders方法返回各类型的样式对象(css: loader)；所以最终loaders 会返回如下对象：

loaders = {

  css: generateLoaders(),

  postcss: generateLoaders(),

  less: generateLoaders('less'),

  sass: generateLoaders('sass', { indentedSyntax: true }),

  scss: generateLoaders('sass'),

  stylus: generateLoaders('stylus'),

  styl: generateLoaders('stylus')

};

执行generateLoaders()函数后，又会返回代码中的对象；如果是正式环境的话，css会分离；因此会返回如下的js对象：

return ExtractTextPlugin.extract({  // ExtractTextPlugin分离js中引入的css文件

  use: loaders, // 处理的loader

  fallback: 'vue-style-loader' // 没有被提取分离时使用的loader

});

如果是开发环境下的话；会返回：

return ['vue-style-loader'].concat(loaders);

最后在 styleLoaders函数中；会进行loaders循环；如下：

for (const extension in loaders) { // 循环遍历loaders

  const loader = loaders[extension]; // 根据遍历获得的key(extension)来得到value(loader)

  output.push({

    test: new RegExp('\\.' + extension + '$'), // 处理的文件类型

    use: loader  // 用loader来处理，loader来自loaders[extension]

  });

}

最后返回 output, 返回的数组，数组中保存的是针对各类型的样式文件的处理方式。

插件配置如下代码：

plugins: [

  new webpack.DefinePlugin({ // 编译时配置的全局变量

    'process.env': require('../config/dev.env') // 当前环境为开发环境

  }),

  // 开启webpack热更新功能

  new webpack.HotModuleReplacementPlugin(),

  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

  // webpack编译过程中出错的时候跳过报错阶段，不会阻塞编译，在编译结束后报错

  new webpack.NoEmitOnErrorsPlugin(),

  // https://github.com/ampedandwired/html-webpack-plugin

  // 自动将依赖注入html模板，并输出最终的html文件到目标文件夹

  new HtmlWebpackPlugin({

    filename: 'index.html',  // 生成的文件名

    template: 'index.html',  // 模板

    inject: true

  })

]

下面是 webpack.dev.conf.js 所有的代码：

'use strict';

const utils = require('./utils');

const webpack = require('webpack');

const config = require('../config');

// webpack-merge是一个可以合并数组和对象的插件

const merge = require('webpack-merge');

const baseWebpackConfig = require('./webpack.base.conf');

// html-webpack-plugin用于将webpack编译打包后的产品文件注入到html模板中

// 即自动在index.html里面加上<link>和<script>标签引用webpack打包后的文件

const HtmlWebpackPlugin = require('html-webpack-plugin');

// friendly-errors-webpack-plugin用于更友好地输出webpack的警告、错误等信息

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

const portfinder = require('portfinder');

const HOST = process.env.HOST;

const PORT = process.env.PORT && Number(process.env.PORT);

// 开发环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置

const devWebpackConfig = merge(baseWebpackConfig, {

  module: {

    // 通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMap

    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

  },

  // cheap-module-eval-source-map is faster for development

  // 使用这种source-map更快

  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js

  devServer: {

    clientLogLevel: 'warning',

    historyApiFallback: true,

    hot: true,

    compress: true,

    host: HOST || config.dev.host,

    port: PORT || config.dev.port,

    open: config.dev.autoOpenBrowser,

    overlay: config.dev.errorOverlay

      ? { warnings: false, errors: true }

      : false,

    publicPath: config.dev.assetsPublicPath,

    proxy: config.dev.proxyTable,

    quiet: true, // necessary for FriendlyErrorsPlugin

    watchOptions: {

      poll: config.dev.poll

    }

  },

  plugins: [

    new webpack.DefinePlugin({ // 编译时配置的全局变量

      'process.env': require('../config/dev.env') // 当前环境为开发环境

    }),

    // 开启webpack热更新功能

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

    // webpack编译过程中出错的时候跳过报错阶段，不会阻塞编译，在编译结束后报错

    new webpack.NoEmitOnErrorsPlugin(),

    // https://github.com/ampedandwired/html-webpack-plugin

    // 自动将依赖注入html模板，并输出最终的html文件到目标文件夹

    new HtmlWebpackPlugin({

      filename: 'index.html',  // 生成的文件名

      template: 'index.html',  // 模板

      inject: true

    })

  ]

});

module.exports = new Promise((resolve, reject) => {

  portfinder.basePort = process.env.PORT || config.dev.port;

  portfinder.getPort((err, port) => {

    if (err) {

      reject(err);

    } else {

      // publish the new Port, necessary for e2e tests

      process.env.PORT = port;

      // add port to devServer config

      devWebpackConfig.devServer.port = port;

      // Add FriendlyErrorsPlugin

      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 友好的错误提示

        compilationSuccessInfo: {

          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]

        },

        onErrors: config.dev.notifyOnErrors

        ? utils.createNotifierCallback()

        : undefined

      }));

      resolve(devWebpackConfig);

    }

  });

});

3-3 webpack.prod.conf.js

生产环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
如下代码：

const path = require('path');

const utils = require('./utils');

const webpack = require('webpack');

// 配置文件

const config = require('../config');

// webpack 配置合并插件

const merge = require('webpack-merge');

// webpack 基本配置

const baseWebpackConfig = require('./webpack.base.conf');

const webpackConfig = merge(baseWebpackConfig, {});

module的处理,主要是针对css的处理, 同样的此处调用了 utils.styleLoaders;

module: {

  // styleLoaders

  rules: utils.styleLoaders({

    sourceMap: config.build.productionSourceMap,

    extract: true,

    usePostCSS: true

  })

}

输出文件output

output: {

  // 编译输出的静态资源根路径 创建dist文件夹

  path: config.build.assetsRoot,

  // 编译输出的文件名

  filename: utils.assetsPath('js/[name].[chunkhash].js'),

  // 没有指定输出名的文件输出的文件名 或可以理解为 非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块

  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

}

webpack.prod.conf.js 所有代码如下：

'use strict';

// node自带的文件路径工具

const path = require('path');

const utils = require('./utils');

const webpack = require('webpack');

// 配置文件

const config = require('../config');

// webpack 配置合并插件

const merge = require('webpack-merge');

// webpack 基本配置

const baseWebpackConfig = require('./webpack.base.conf');

// webpack 复制文件和文件夹的插件

// https://github.com/kevlened/copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');

// 自动生成 html 并且注入到 .html 文件中的插件

// https://github.com/ampedandwired/html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

// 提取css的插件

// https://github.com/webpack-contrib/extract-text-webpack-plugin

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// webpack 优化压缩和优化 css 的插件

// https://github.com/NMFR/optimize-css-assets-webpack-plugin

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

// js压缩插件

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// 如果当前环境为测试环境，则使用测试环境

// 否则，使用生产环境

const env = process.env.NODE_ENV === 'testing'

  ? require('../config/test.env')

  : require('../config/prod.env');

const webpackConfig = merge(baseWebpackConfig, {

  module: {

    // styleLoaders

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true,

      usePostCSS: true

    })

  },

  // 是否开启 sourceMap

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

    // 编译输出的静态资源根路径 创建dist文件夹

    path: config.build.assetsRoot,

    // 编译输出的文件名

    filename: utils.assetsPath('js/[name].[chunkhash].js'),

    // 没有指定输出名的文件输出的文件名 或可以理解为 非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块

    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

  },

  plugins: [

    // 配置全局环境为生产环境

    // http://vuejs.github.io/vue-loader/en/workflow/production.html

    new webpack.DefinePlugin({

      'process.env': env

    }),

    // js文件压缩插件

    new UglifyJsPlugin({

      uglifyOptions: {

        compress: { // 压缩配置

          warnings: false // 不显示警告

        }

      },

      sourceMap: config.build.productionSourceMap, // 生成sourceMap文件

      parallel: true

    }),

    // extract css into its own file

    // 将js中引入的css分离的插件

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name].[contenthash].css'), // 分离出的css文件名

      // set the following option to `true` if you want to extract CSS from

      // codesplit chunks into this main css file as well.

      // This will result in *all* of your app's CSS being loaded upfront.

      allChunks: false

    }),

    // 压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)

    // Compress extracted CSS. We are using this plugin so that possible

    // duplicated CSS from different components can be deduped.

    new OptimizeCSSPlugin({

      cssProcessorOptions: config.build.productionSourceMap

        ? { safe: true, map: { inline: false } }

        : { safe: true }

    }),

    // generate dist index.html with correct asset hash for caching.

    // you can customize output by editing /index.html

    // 将 index.html 作为入口，注入 html 代码后生成 index.html文件 引入css文件和js文件

    // https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

      filename: process.env.NODE_ENV === 'testing'

        ? 'index.html'

        : config.build.index,  // 生成的html的文件名

      template: 'index.html',  // 依据的模板

      inject: true,  // 注入的js文件将会被放在body标签中,当值为'head'时，将被放在head标签中

      minify: { // 压缩配置

        removeComments: true,  // 删除html中的注释代码

        collapseWhitespace: true, // 删除html中的空白符

        removeAttributeQuotes: true // 删除html元素中属性的引号

        // 更多选项 https://github.com/kangax/html-minifier#options-quick-reference

      },

      // necessary to consistently work with multiple chunks via CommonsChunkPlugin

      // 必须通过 CommonsChunkPlugin一致地处理多个 chunks

      chunksSortMode: 'dependency'  // 按dependency的顺序引入

    }),

    // keep module.id stable when vender modules does not change

    new webpack.HashedModuleIdsPlugin(),

    // enable scope hoisting

    new webpack.optimize.ModuleConcatenationPlugin(),

    // split vendor js into its own file

    // 分割公共 js 到独立的文件vendor中

    // https://webpack.js.org/guides/code-splitting-libraries/#commonschunkplugin

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor', // 文件名

      minChunks (module) { // 声明公共的模块来自node_modules文件夹

        // any required modules inside node_modules are extracted to vendor

        // node_modules中的任何所需模块都提取到vendor

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          module.resource.indexOf(

            path.join(__dirname, '../node_modules')

          ) === 0

        );

      }

    }),

    /*

     上面虽然已经分离了第三方库,每次修改编译都会改变vendor的hash值，导致浏览器缓存失效。

     原因是vendor包含了webpack在打包过程中会产生一些运行时代码，运行时代码中实际上保存了打包后的文件名。

     当修改业务代码时,业务代码的js文件的hash值必然会改变。一旦改变必然

     会导致vendor变化。vendor变化会导致其hash值变化。

    */

    // 下面主要是将运行时代码提取到单独的manifest文件中，防止其影响vendor.js

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      minChunks: Infinity

    }),

    // This instance extracts shared chunks from code splitted chunks and bundles them

    // in a separate chunk, similar to the vendor chunk

    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk

    new webpack.optimize.CommonsChunkPlugin({

      name: 'app',

      async: 'vendor-async',

      children: true,

      minChunks: 3

    }),

    // 复制静态资源,将static文件内的内容复制到指定文件夹

    // https://github.com/kevlened/copy-webpack-plugin

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname, '../static'),

        to: config.build.assetsSubDirectory,

        ignore: ['.*']

      }

    ])

  ]

});

// 配置文件开启了gzip压缩

if (config.build.productionGzip) {

  // 引入压缩文件的组件,该插件会对生成的文件进行压缩，生成一个.gz文件

  // https://github.com/webpack-contrib/compression-webpack-plugin

  const CompressionWebpackPlugin = require('compression-webpack-plugin');

  // 向webpackconfig.plugins中加入下方的插件

  webpackConfig.plugins.push(

    new CompressionWebpackPlugin({

      asset: '[path].gz[query]', // 目标文件名

      algorithm: 'gzip', // 使用gzip压缩

      test: new RegExp(  // 满足正则表达式的文件会被压缩

        '\\.(' +

        config.build.productionGzipExtensions.join('|') +

        ')$'

      ),

      threshold: 10240, // 资源文件大于10240B=10kB时会被压缩

      minRatio: 0.8  // 最小压缩比达到0.8时才会被压缩

    })

  );

}

// 开启包分析的情况时， 给 webpack plugins添加 webpack-bundle-analyzer 插件

if (config.build.bundleAnalyzerReport) {

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

  webpackConfig.plugins.push(new BundleAnalyzerPlugin());

}

module.exports = webpackConfig;

github上的项目

注意： 上面的配置代码都是从vue-cli上下载下来的，每个配置的含义都是从网上资料总结出来的，为了以后项目的需要直接可以拿来使用，且记录下配置的含义；

码农公寓

相关文章