webpack学习笔记-7-开发环境和生产环境

1.背景

前面的几篇文章介绍了如何使用webpack进行开发，包括webpack的功能，使用webpack打包，webpack的几个常用loader，plugin，使用webpack-dev-server调试。但是开发环境和生产环境是有区别的，开发完成后的项目还需要再进行一些其它处理才能构建到生产环境。比如，在开发阶段我们是不需要对js代码进行压缩处理的，而生产环境就有这种需求。webpack命令提供了使用不同配置文件进行打包过程的参数： --config。这样我们可以写不同的配置文件，开发阶段和生产阶段使用不同的配置文件进行构建就可以了。

下面介绍一下，js代码压缩插件的使用和如何在开发环境和生产环境打包。

2.UglifyJsPlugin

webpack内置js代码压缩插件：UglifyJsPlugin，使用时不需要额外安装，配置文件写法：

var webpack = require('webpack');  
var ExtractTextPlugin = require('extract-text-webpack-plugin');  
var HtmlPlugin = require('html-webpack-plugin');  

var extractCss = new ExtractTextPlugin('[name]-one.css');  
var extractLess = new ExtractTextPlugin('[name]-two.css');  
module.exports = {  
    // 入口文件路径，__dirname是根目录  
    entry: __dirname + '/src/main.js',  
    // 打包生成文件  
    output: {  
        path: __dirname + '/output',  
        filename: 'main.js'  
    },  

    module: {  
        rules: [  
            {  
                test: /\.css/,  
                use: extractCss.extract({  
                    fallback: 'style-loader',  
                    use: [  
                        'css-loader',  
                        'autoprefixer-loader'  
                    ]  
                })  
            },  
            {  
                test: /\.less$/,  
                use: extractLess.extract({  
                    fallback: 'style-loader',  
                    use: [  
                        'css-loader',  
                        'autoprefixer-loader',  
                        'less-loader'  
                    ]  
                })  
            },  
            {  
                test: /\.jpeg$/,  
                // use: 'url-loader?limit=1024&name=[path][name].[ext]&publicPath=output/',  
                use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=./',  
            },  
        ]  
    },  

    plugins: [  
        new HtmlPlugin(),  
        new webpack.optimize.UglifyJsPlugin(),  
        extractCss,  
        extractLess  
    ]  
}

3.开发环境和生产环境

webpack命令可以附带参数：--config，用来指明打包使用的配置文件，若没有这个参数，则默认读取webpack.config.js。作为例子，我们写两个config文件，一个是webpack.dev.config.js，用于开发环境的配置，一个是webpack.prod.config.js。用于生产环境的配置。在我们的例子中，两者的区别就是开发环境打包中没有使用js代码压缩插件而生产环境打包使用了。

// webpack.dev.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');  
var HtmlPlugin = require('html-webpack-plugin');  

var extractCss = new ExtractTextPlugin('[name]-one.css');  
var extractLess = new ExtractTextPlugin('[name]-two.css');  
module.exports = {  
    // 入口文件路径，__dirname是根目录  
    entry: __dirname + '/src/main.js',  
    // 打包生成文件  
    output: {  
        path: __dirname + '/output',  
        filename: 'main.js'  
    },  

    module: {  
        rules: [  
            {  
                test: /\.css/,  
                use: extractCss.extract({  
                    fallback: 'style-loader',  
                    use: [  
                        'css-loader',  
                        'autoprefixer-loader'  
                    ]  
                })  
            },  
            {  
                test: /\.less$/,  
                use: extractLess.extract({  
                    fallback: 'style-loader',  
                    use: [  
                        'css-loader',  
                        'autoprefixer-loader',  
                        'less-loader'  
                    ]  
                })  
            },  
            {  
                test: /\.jpeg$/,  
                // use: 'url-loader?limit=1024&name=[path][name].[ext]&publicPath=output/',  
                use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=./',  
            },  
        ]  
    },  

    plugins: [  
        new HtmlPlugin(),  
        extractCss,  
        extractLess  
    ]  
}

// webpack.prod.config.js

var webpack = require('webpack');  
var ExtractTextPlugin = require('extract-text-webpack-plugin');  
var HtmlPlugin = require('html-webpack-plugin');  

var extractCss = new ExtractTextPlugin('[name]-one.css');  
var extractLess = new ExtractTextPlugin('[name]-two.css');  
module.exports = {  
    // 入口文件路径，__dirname是根目录  
    entry: __dirname + '/src/main.js',  
    // 打包生成文件  
    output: {  
        path: __dirname + '/output',  
        filename: 'main.js'  
    },  

    module: {  
        rules: [  
            {  
                test: /\.css/,  
                use: extractCss.extract({  
                    fallback: 'style-loader',  
                    use: [  
                        'css-loader',  
                        'autoprefixer-loader'  
                    ]  
                })  
            },  
            {  
                test: /\.less$/,  
                use: extractLess.extract({  
                    fallback: 'style-loader',  
                    use: [  
                        'css-loader',  
                        'autoprefixer-loader',  
                        'less-loader'  
                    ]  
                })  
            },  
            {  
                test: /\.jpeg$/,  
                // use: 'url-loader?limit=1024&name=[path][name].[ext]&publicPath=output/',  
                use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=./',  
            },  
        ]  
    },  

    plugins: [  
        new HtmlPlugin(),  
        new webpack.optimize.UglifyJsPlugin(),  
        extractCss,  
        extractLess  
    ]  
}

这样，我们在开发环境进行打包时，输入命令 webpack --config ./webpack.dev.config.js；在生产环境打包则输入 webpack --config ./webpack.prod.config.js即可。

为了进一步方便我们的操作，可以在package.json里配置一下命令：

"scripts": {  
  "dev": "webpack --config ./webpack.dev.config.js",  
  "build": "webpack --config ./webpack.prod.config.js"  
},

这样，开发环境时输入命令 npm run dev；生产环境输入 npm run build。

4.demo

地址：https://github.com/KIDFUCKER/webpack-demo.git

分支：v9-UglifyJsPlugin