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