1. const path = require('path');
    2. const webpack = require('webpack');
    3. const ExtractTextPlugin = require('extract-text-webpack-plugin');
    4. const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
    5. // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    6. const utils = require('./utils');
    7. const vueConfig = require('./vue-loader.config');
    8. const { ENV_CONFIG } = require('./definition.js');
    10. const isProd = process.env.NODE_ENV === 'production';
    13. module.exports = {
    14.   cache: true,
    15.   // https://www.cnblogs.com/jkr666666/p/11067189.html
    16.   // eval
    17.   // 如上打包后的代码，每一个打包后的模块后面都增加了包含sourceURL的注释，sourceURL的值是压缩前存放的代码的位置，这样就通过sourceURL关联了压缩前后的代码。并没有为每一个模块生成相对应的sourcemap。
    18.     //优点是：打包速度非常快，因为不需要生成sourcemap文件。
    19.     //缺点是：由于会映射到转换后的代码，而不是映射到原始代码，所以不能正确的显示行数
    20.   devtool: isProd ? false : 'eval',
    21.   output: {
    22.     path: path.resolve(__dirname, '../dist'),
    23.     publicPath: '/dist/',
    24.     filename: '[name].[chunkhash].js',
    25.     // 将包导出为库。 output.library 就是库的名字
    26.     pathinfo: true
    27.   },
    28.   resolve: {
    29.     alias: {
    30.       vue: 'vue/dist/vue.js',
    31.       public: path.resolve(__dirname, '../public'),
    32.       '@': path.resolve(__dirname, '../src'),
    33.       '@views': path.resolve(__dirname, '../src/views'),
    34.       '@components': path.resolve(__dirname, '../src/components'),
    35.       '@util': path.resolve(__dirname, '../src/util'),
    36.       '@mixins': path.resolve(__dirname, '../src/mixins'),
    37.       '@config': path.resolve(__dirname, '../src/config')
    38.     }
    39.   },
    40.   module: {
    41.     noParse: [/es6-promise\.js$/, /es6-shim\.js$/], // avoid webpack shimming process
    42.     rules: [
    43.       {
    44.         test: /\.vue$/,
    45.         loader: 'vue-loader',
    46.         options: vueConfig
    47.       },
    48.       {
    49.         test: /\.js$/,
    50.         loader: 'babel-loader',
    51.         exclude: /node_modules/,
    52.       },
    53.       {
    54.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    55.         loader: 'url-loader',
    56.         options: {
    57.           limit: 10000,
    58.           name: utils.assetsPath('img/[name].[ext]?[hash]')
    59.         }
    60.       },
    61.       {
    62.         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    63.         loader: 'url-loader',
    64.         options: {
    65.           limit: 10000,
    66.           name: utils.assetsPath('fonts/[name].[hash].[ext]')
    67.         }
    68.       }
    69.     ]
    70.   },
    71.   performance: {
    72.     // 入口最大体积限制重置
    73.     maxEntrypointSize: 300000,
    74.     // 创建超过250kb的资源,没有提示警告或错误显示
    75.     hints: isProd ? 'warning' : false
    76.   },
    77.   plugins: isProd
    78.     ? [
    79.         new webpack.DefinePlugin({
    80.           ...ENV_CONFIG,
    81.           prd: true
    82.         }),
    83.         new webpack.optimize.UglifyJsPlugin({
    84.           //UglifyJS里的mangle选项可以设置boolean和object，直观的感觉是，mangle选项让你决定是否把代码里面的变量名进行优化，比如有些变量名很长的，它直接一个字母就替代了，极大的缩短了变量名长度带来的代码量问题，只要在同一个作用域里面，不被外部调用，这种替换非常安全。这一招直接让你的代码缩减巨大，即使你把compress选项设置为false，也能看到显著效果。它还提供更详细的设置选项，你可以选择是否替换toplevel的变量名（默认不替换），也可以有其他选项，具体可以看文档。
    85.           mangle: true,
    86.           compress: {
    87.             // 允许过滤uglify警告
    88.             warnings: false,
    89.             //默认是 false. 如果你传入true，UglifyJS会假设对象属性的引用（例如foo.bar 或 foo["bar"]）没有函数副作用
    90.             pure_getters: true,
    91.             // 使用 "unsafe"转换
    92.             unsafe: true,
    93.             保留< 和 <=不被换成 > 和 >=。假如某些运算对象是用get或 valueOfobject得出的时候，转换可能会不安全，可能会引起运算对象的改变。此选项只有当 comparisons和unsafe_comps 都设为true时才会启用。
    94.             unsafe_comps: true,
    95.             // 是否要支持IE6/7/8。UglifyJS默认不兼容IE。
    96.             screw_ie8: true
    97.           },
    98.           output: { comments: false }
    99.         }),
    100.           // 这个没查到是干嘛的？更具侵略的合并？
    101.         new webpack.optimize.AggressiveMergingPlugin(),
    102.           // 这个插件的作用是按照chunk引用次数来安排出现顺序，因为这让经常引用的模块和chunk拥有更小的id。使ids可预测，减小文件大小，推荐使用
    103.           // 可是我看dist目录下的id长度都一样啊？难道是开发环境的原因？  
    104.           new webpack.optimize.OccurrenceOrderPlugin(),
    105.         // 开启 ScopeHoisting
    106.         new webpack.optimize.ModuleConcatenationPlugin(),
    107.         // new BundleAnalyzerPlugin(),
    108.           // 将css模块和js模块分开打包，换句话说把css代码从js文件中抽离出来，单独出一个模块。
    109.         new ExtractTextPlugin({
    110.           filename: utils.assetsPath('css/[name].[contenthash].css')
    111.         })
    112.         // new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en'),
    113.       ]
    114.     : [
    115.         new FriendlyErrorsPlugin(),
    116.         // new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en'),
    117.         new webpack.DefinePlugin({
    118.           ...ENV_CONFIG,
    119.           prd: false
    120.         })
    121.       ]
    122. };
    1. module.exports = {
    2.   // // 会把vue中的样式文件提取出来
    3.   extractCSS: process.env.NODE_ENV === 'production',
    4.   preserveWhitespace: false,
    5.   postcss: [
    6.     require('autoprefixer')({
    7.       browsers: ['last 3 versions']
    8.     })
    9.   ]
    10. }