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