使用 Webpack2 合并、压缩前端资源

编辑于 2017-04-23

* 移动设备下, 可左滑手指以查看较宽代码

合并并压缩前端资源(CSS,JS 等),可以减少请求和流量,增加访问速度,亦可为开发 Pjax 页面做准备。

网上的资料有点过时了,有的不准确或者太麻烦,谨记之。

前提

需要先安装 NodeJS,它自带一个包管理器 NPM, 具体安装方法网上很多,这里不赘述。

安装 Webpack 和插件

全局安装 Webpack,即此电脑上的所有项目都可用:

npm install webpack -g

这一步将创建 package.json,这一文件定义此项目所依赖的包。进项目根目录,执行:

npm init -y

如果全局安装后,使用时出现了问题(比如报错:Cannot find module 'webpack/lib/Chunk),需要针对项目安装:

npm install webpack --save-dev

或者:

# ~/.bash_profile 中添加如下设置(没有此文件则创建它):
export NODE_PATH="/usr/local/lib/node_modules"
# 保存退出,然后
source ~/.bash_profile

然后是 CSS 打包插件:

npm install style-loader css-loader --save-dev

css-loader 和 style-loader 用于处理样式表,--save-dev 选项用于将其添加这些包到前面创建的 package.json 文件。当你迁移代码到其它机器时,执行 npm install 即可自动安装这些包。

配置 Webpack

在项目根目录创建 webpack.config.js 文件,即 Webpack 的配置文件,填入:

var path = require('path');

// 引入 CSS 打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        // 这里写要打包的 JS,也可先用 npm 安装(如 jquery2),然后直接填入 jquery2
        index: [
            './public/js/src/bubble.js',
            './public/js/src/css.js'
        ]
    },
    // JS 打包后输出到哪(path + filename)
    output: {
        path: path.join(__dirname, './public/js/dist'),
        filename: 'build.min.js',
    },
    
    module: {
        // 使用了针对 CSS 的加载器
        loaders: [
            {test: /\.css$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'})},
        ]
    },
    
    plugins: [
        // 在这里定义 CSS 打包输出到哪
        new ExtractTextPlugin("../../css/dist/build.min.css"),
    ]
};

注意,上面的 './public/js/src/css.js' (也可以是其他文件,这里只是示例)直接填入:

// 这里直接 require 要打包的 CSS 文件即可,Webpack 会处理它
require('../../css/src/index.css');

最后在命令行中执行:

# 打包
webpack

# 这个是打包并压缩
webpack -p

这基本上是最简单的方法了 :)