webpack3构建生产和开发环境分离

官网链接：https://webpack.js.org/guides/production/

 webpack开发环境和生产环境的构建目标差异很大。在开发环境中，需要具有强大的、具有实时加载或者热模块替换的source map和localhost server。而生产环境中，关注的是更小的bundle，更轻量的source map,以及更加优化的资源，已改善加载文件的时间。要遵循逻辑分离，我们通常建议为每个环境编写独立的webpack配置。

 虽然，我们将生产环境（prod）和开发环境（dev）做了区分，但是还是要注意不要做重复的原则，保留通用配置。为了将这些配置合并在一起，需要使用webpack-merge插件，通过“通用”配置，我们不必在环境特定的配置中写重复代码。

 因为我的项目是react，所以以react项目为例

1.安装webpack-merge插件 

 npm install --save-dev webpack-merge

---

2.项目结构和代码

 

• webpack.base.config.js（公共模块）

//__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path=require('path');

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(__dirname, 'src');
var LIB_PATH =path.resolve(__dirname, 'node_modules');
console.log(SRC_PATH);
console.log(LIB_PATH);

module.exports = {//注意这里是exports不是export
    entry: {
        app:SRC_PATH + "/main.js",//唯一入口文件，就像Java中的main方法
        lib: ["react"],
    },
    output: {//输出目录
        path: ROOT_PATH + "/build",//打包后的js文件存放的地方
        filename: "js/bundle.js",//打包后的js文件名
        chunkFilename: 'js/[name].[id].js',//bundle-loader分开打包的js名字
    },
    module: {
        //loaders加载器
        rules: [
            {
                test: /\.bundle\.js$/,
                loader: 'bundle-loader',
                include:/page/,
                options: {
                    lazy: true,
                    name: '[name]'
                }
            },{
                test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
                exclude: LIB_PATH,//屏蔽不需要处理的文件（文件夹）（可选）
                use: 'babel-loader'//loader的名称（必须）
            },{ 
                test: /\.(css|less)$/, 
                use:ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true, // 指定启用css modules
                                localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                            }

                        },{
                            loader: "postcss-loader",
                            options: {
                                plugins: () => [autoprefixer(
                                  { browsers: ['iOS >= 7', 'Android >= 4.1', 
                                     'last 10 Chrome versions', 'last 10 Firefox versions', 
                                     'Safari >= 6', 'ie > 8'] 
                                  }
                                )],
                            },
                        },{
                            loader: "less-loader"
                        }]
                })
            },{
                test: /\.(eot|svg|ttf|woff|woff2)\w*/,// font awesome loader
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        outputPath:'css/'
                    }
                  }
                ]               
            }

        ]
    },
    plugins: [
        new ExtractTextPlugin('css/[name].css'),
        new HtmlWebpackPlugin({
            template: __dirname + "/src/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'lib', 
            filename:'js/common.js',
            minChunks: function (module) {
                // This prevents stylesheet resources with the .css or .scss extension
                // from being moved from their original chunk to the vendor chunk
                if(module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
                    return false;
                }
                return module.context && module.context.includes("node_modules");
            }
        })
    ]
};

• webpack.dev.config.js 开发模块

 const merge = require('webpack-merge');
 const base = require('./webpack.base.config.js');

 module.exports = merge(base, {
     devtool: 'source-map',
     devServer: {
         contentBase: "./build", //本地服务器所加载的页面所在的目录
         historyApiFallback: true, //不跳转
         port: 8888, //设置默认监听端口，如果省略，默认为”8080“
         inline: true //实时刷新
     },
 });

•  webpack.base.config.js 生产环境

const merge = require('webpack-merge');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const base = require('./webpack.base.config.js');
module.exports = merge(base, {
    devtool: 'source-map',//为了能显示，因为懒没弄node server 正常可以省略
    plugins: [
        new UglifyJSPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.LoaderOptionsPlugin({ //去除调试代码，压缩代码
            minimize: true
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //     output: {
        //         comments: false// remove all comments
        //     },
        //     compress: {
        //         warnings: false
        //     },
        //     sourceMap: true // 如果你在压缩代码时启用了 source map，或者想要让 uglifyjs 的警告能够对应到正确的代码行，你需要将 UglifyJsPlugin 的 sourceMap 设为 true。
        // }),
        // new webpack.NoEmitOnErrorsPlugin(),//复制手动引入的资源文件到指定目录
    ]
});

3.package.json添加生成生产环境资源命令和开发环境启动服务命令

"start": "webpack --config webpack.prod.config.js",
"dev":"webpack-dev-server --open --config webpack.dev.config.js",
"server": "webpack-dev-server --open --config webpack.prod.config.js"

最后一条只是我懒= =，直接启动webpack-dev-server。

然后我们来启动看看。

1.npm run dev 

 可以看到下图，react developer tools 是红色的，开发模式ok

2.npm run server

 可以看到下图，react developer tools 是蓝色的，生产模式ok