https://doc.webpack-china.org/guides/caching/
应用程序静态模块打包器
webpack-dev-server 为你提供了一个简单的web服务器，并且能够实时重新加载，
npm install —save-dev webpack-dev-server
当使用 webpack dev server 和 Node.js API 时，不要将 dev server 选项放在 webpack 配置对象(webpack config object)中。而是，在创建选项时，将其作为第二个参数传递
const webpackDevServer = require('webpack-dev-server'); // 服务依赖
const webpack = require('webpack’); // webpack依赖
const config = require('./webpack.config.js'); // webpack的config依赖
const options = { dev-server的配置
contentBase: './dist',
hot: true,
host: 'localhost'
};
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
server.listen(5000, 'localhost', () => {
console.log('dev server listening on port 5000');
});
webpack的开发和生产环境是不同的，开发环境要去有强大的实时重新加载模块和热替换模块，生产环境要求更快的加载时间，更优化的资源应用。
但是还是要遵循DRY原则：
webpack-demo
|- package.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
|- /dist
|- /src
|- index.js
|- math.js
|- /node_modules
依据此项目目录，我们提取出开发环境和生产环境公共的代码，
webpack.common.js:
+ const path = require('path');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+ module.exports = {
+ entry: {
+ app: './src/index.js'
+ },
+ plugins: [
+ new CleanWebpackPlugin(['dist']),
+ new HtmlWebpackPlugin({
+ title: 'Production'
+ })
+ ],
+ output: {
+ filename: '[name].bundle.js',
+ path: path.resolve(__dirname, 'dist')
+ }
+ };
webpack.dev.js:
+ const merge = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+ devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist'
+ }
+ });
webpack.prod.js:
+ const merge = require('webpack-merge');
+ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+ plugins: [
+ new UglifyJSPlugin()
+ ]
+ });
防止重复的CommonsChunkPlugin
ExtractTextPlugin ：将css从主应用程序中分离
bundle-loader ： 用于分离代码和延迟加载生成的bundle
promise-loader ：类似于bundle-loader ：但使用的是promises
动态导入：
1 import （会调用到内部的promises）
polyfill 垫片 支持新的javascript代码，不支持新的api