webpack生产环境配置

Author: labnize

.gitignore

@@ -1,5 +1,6 @@
 .idea/
 node_modules/
+dist/
 
 .DS_Store
 *.log

build/webpack.dist.config.js

@@ -0,0 +1,113 @@
+const webpack = require('webpack');
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const webpackConfig = {
+  entry: {
+    app: path.resolve(__dirname, '../src/main.js'),
+    vendor: ['vue']
+  },
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: '[name].[chunkhash].js',
+    publicPath: '/'
+  },
+  cache: false,
+  devtool: false,
+  resolve: {
+    extensions: ['.js', '.vue'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          extractCSS: true
+        }
+      },
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: 'babel-loader'
+          }
+        ],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
+        use: ['url-loader?limit=1024&name=images/[name].[hash:8].[ext]']
+      },
+      {
+        test: /\.styl$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            'css-loader',
+            'stylus-loader'
+          ]
+        })
+      }]
+  },
+  plugins: [
+    new BundleAnalyzerPlugin(),
+    new CleanWebpackPlugin(['dist'], {
+      root: path.resolve(__dirname, '../')
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production')
+      }
+    }),
+    new webpack.HashedModuleIdsPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['vendor', 'runtime'],
+      minChunks: 2
+    }),
+    new ExtractTextPlugin({
+      filename: 'styles.[contenthash].css',
+      disable: false,
+      allChunks: true
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      mangle: {
+        except: ['$super', '$', 'exports', 'require']  // 以上变量‘$super’, ‘$’, ‘exports’ or ‘require’，不会被混淆
+      },
+      output: {
+        comments: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    }),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: path.resolve(__dirname, '../src/index.html'),
+      inject: true,
+      minify: {
+        removeAttributeQuotes: true,
+        removeComments: true,
+        removeEmptyAttributes: true,
+        collapseWhitespace: true
+      }
+    })
+  ]
+};
+
+module.exports = webpackConfig;

package.json

@@ -5,7 +5,8 @@
   "main": "main.js",
   "dependencies": {},
   "scripts": {
-    "start": "node build/dev-server.js"
+    "start": "node build/dev-server.js",
+    "build": "webpack --config build/webpack.dist.config.js --progress --hide-modules"
   },
   "keywords": [
     "vue",
@@ -21,6 +22,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
+    "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.28.5",
     "eslint": "^4.5.0",
     "eslint-config-airbnb-base": "^11.3.2",
@@ -37,6 +39,7 @@
     "vue-loader": "^13.0.4",
     "vue-template-compiler": "^2.4.2",
     "webpack": "^3.5.5",
+    "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.7.1"
   }
 }