webpack2配置

详细的配置可以参考官网：https://doc.webpack-china.org/guides/

一开始做项目时都是直接从组里前辈搭建好的脚手架开始写代码，到后来自己写新项目时又是拷贝之前的工程作为脚手架开始。对于脚手架本身却不甚了解，不仅不思考为什么更是没有改进的想法，怪不得工作满一年了却总觉得自己的技术水平在原地踏步，就是没有总结和思考。

目前组里的技术栈都是使用vue+koa，使用webpack的好处一是方便写vue的单文件组件，二是打包文件方便生产部署再加上能无所顾虑的应用语言的新特性。

1. 配置文件

官方文档推荐写webpack配置文件时，先写出一个基本配置文件（base）包含入口、输出等，再根据开发/生产环境所需要插件的不同，利用webpack-merge生成三个配置文件: dev、prod、analyze

package.json 依赖参考

"devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.28.4",
    "koa-webpack-dev-middleware": "^1.4.0",
    "koa-webpack-hot-middleware": "^1.0.3",
    "less": "^2.7.1",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.7",
    "vue-loader": "^12.2.2",
    "webpack": "^3.3.0",
    "webpack-bundle-analyzer": "^2.8.3",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.6.1",
    "webpack-hot-middleware": "^2.13.1",
    "webpack-koa-hot-middleware": "^0.1.2",
    "webpack-manifest-plugin": "^1.2.1",
    "webpack-merge": "^4.1.0"
  }

 

webpack.config.base.js

'use strict'
let path = require('path');
let webpack = require('webpack');
let WebpackManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
    output: {
        path: path.resolve(__dirname, '..', 'build')
    },
    resolve: {
        extensions: ['.js', '.vue'],
        modules: ['node_modules'],
        alias: {
            'leafletCSS': 'leaflet/dist/leaflet.css',
            'leaflet$': 'leaflet/dist/leaflet.js',
            'vue$': 'vue/dist/vue.min.js',
            'vue-resource$': 'vue-resource/dist/vue-resource.min.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff2?|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new WebpackManifestPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            chunks: ['qq', 'navi', 'log', 'guide', 'apply', 'voice', 'pianhang', 'dynamic'], //这里输入需要提取公共代码的entry
            minChunks: 2
        }),
        //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest', //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
        }),
    ]
}

第16行代码可以参考这里和这里，默认NPM包导出的是运行时构建，Vue2的运行时构建不支持单文件组件的template

第58行的 WebpackManifestPlugin 作用是将输出文件名保存在文件中 (当输出文件名带 chunkhash 时很有用，参考这里)

第59~74行的 CommonsChunkPlugin 作用是从打包后的 bundle 文件中提取公共模块，将 npm install 的公共模块和业务代码分开，这样浏览器就可以一直缓存公共模块的bundle，参考这里。第一个 CommonsChunkPlugin 作用是将 node_modules 里的模块提取到 vendor.js 里；第二个 CommonsChunkPlugin 作用是将 entry 里的公共代码提取出来放在 common.js 里，参考这里；第三个 CommonsChunkPlugin 作用是将 webpack 运行时代码放在 manifest.js 里

 

webpack.config.dev.js

"use strict"
let webpack = require('webpack');
let merge = require('webpack-merge');
let base_config = require('./webpack.config.base');

module.exports = merge(base_config, {
    entry: {
        qq: ['./src/qq/qq.js', 'webpack-hot-middleware/client'],
        navi: ['./src/navi/navi.js', 'webpack-hot-middleware/client'],
        log: ['./src/log/log.js', 'webpack-hot-middleware/client'],
        guide: ['./src/guide/guide.js', 'webpack-hot-middleware/client'],
        apply: ['./src/apply/apply.js', 'webpack-hot-middleware/client'],
        voice: ['./src/voice/voice.js', 'webpack-hot-middleware/client'],
        pianhang: ['./src/pianhang/pianhang.js', 'webpack-hot-middleware/client'],
        dynamic: ['./src/dynamic/dynamic.js', 'webpack-hot-middleware/client']
    },
    output: {
        filename: '[name].js',
    },
    devtool: '#eval-source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ]
});

第 20 行设置source-map，方便用浏览器查看源代码

 

webpack.config.prod.js

"use strict"
let webpack = require('webpack');
let merge = require('webpack-merge');
let base_config = require('./webpack.config.base');

module.exports = merge(base_config, {
    entry: {
        qq: ['./src/qq/qq.js'],
        navi: ['./src/navi/navi.js'],
        log: ['./src/log/log.js'],
        guide: ['./src/guide/guide.js'],
        apply: ['./src/apply/apply.js'],
        voice: ['./src/voice/voice.js'],
        pianhang: ['./src/pianhang/pianhang.js'],
        dynamic: ['./src/dynamic/dynamic.js'],
    },
    output: {
        filename: '[name].[chunkhash].js',
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
});

第 21 行 UglifyJsPlugin 的作用是压缩、混淆代码

 

webpack.config.analyze.js

"use strict"

let webpack = require('webpack');
let merge = require('webpack-merge');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
let prod_config = require('./webpack.config.prod');

module.exports = merge(prod_config, {
    plugins: [
        new BundleAnalyzerPlugin()
    ]
});

analyze 文件的作用利用 webpack-bundle-analyzer 插件分析打包情况，

webpack --config ./config/webpack.config.analyze.js

运行结果如下：

 

webpack的配置文件自定义程度很高，所以在参考他人配置时最好能弄清楚为什么要这样写

 

2. webpack-dev-server 

在开发过程中另一个重要的东西是 webpack-dev-server，它的作用是当你改动源代码后能自动重新打包，再加上 webpack 的HMR-模块热替换特性，这样改动代码就能直接在浏览器里看到效果，省却了代码手动打包+刷新浏览器的步骤。使用 webpack-dev-server 有 CLI 和 API 两种使用方法。

CLI 方式设置 dev 文件中的 HotModuleReplacementPlugin 和 devServer 启用 HMR。启动的命令为：

webpack-dev-server --config ./config/webpack.config.dev.js

API 方式直接在命令里设置参数，如：(这里用到了 Unix Domin Socket，也可以直接指定 ip和端口）

webpack-dev-server --config config/webpack.dev.config.js --public 0.0.0.0:8056 --progress --inline --hot --socket .dev-shared/sockets/webpack.sock

webpack-dev-server 的方式配置简单，缺点是引入 bundle 比较麻烦，需要指定其它端口

 

3. webpack-dev-middleware 

上述配置文件就是使用的该方法，需要有 koa-webpack-dev-middleware、koa-webpack-hot-middleware（热更新）。然后在 index.js 里写：

if (process.env.NODE_ENV == 'dev') {
    let webpack = require('webpack');
    let webpackConfig = require('./config/webpack.config.dev.js');
    let webpackDevMiddleware = require('koa-webpack-dev-middleware');
    let webpackHotMiddleware = require('koa-webpack-hot-middleware');
    let compiler = webpack(webpackConfig);
    app.use(webpackDevMiddleware(compiler));
    app.use(webpackHotMiddleware(compiler));
}

这样就不需要通过额外的端口获取 bundle 文件了，注意这里是 koa 环境

 

4. 如何在前端框架里引入 bundle

由于 webpack prod 配置文件里使用了 chunkhash 作为 bundle 的名字的一部分，修改业务代码，chunkhash 会发生改变，所以需要通过一些方法自动将 bundle 名字注入到前端页面里：

第一种方法是通过在后端 controller 里读取 manifest.json 里的内容，然后通过模板引擎，注入到页面里，例如 nunjucks：

{% for path in paths %}
    <script src="{{path}}"></script>
{% endfor %}

第二种方法是拓展模板引擎命令，例如 xtpl:

{{{ xScript('manifest.js') }}}
{{{ xScript('vendor.js') }}}
{{{ xScript('common.js') }}}
{{{ xScript('apply.js') }}}

xtpl 命令拓展示例 xtpl.ext.js ：

let xtplApp = require('xtpl/lib/koa');
let xtpl = require('xtpl/lib/xtpl');
let XTemplate = xtpl.XTemplate;

XTemplate.addCommand('xScript', function(scope, option){
    let name = option.params[0];
    if (process.env.NODE_ENV !== 'dev') {
        let assets_map = require('./manifest');
        name = assets_map[name];
    }
    return '<script src="' + name + '" ></script>';
});

module.exports = xtplApp;

然后在 index.js 里

let xtpl = require('./extensions/xtpl.ext');

 

注意引入 bundle 的时候要注意引入顺序：manifest > vendor > common > entry，否则可能会报 ReferenceError: webpackJsonp is not defined 错误，还要注意要有 .babelrc 文件：

{
    "presets": ["es2015"]
}

否则会报 SyntaxError: Unexpected token: name (xxxxxx) from Uglify plugin 之类的错误，无法识别语言新特性