webpack 项目实战 - ES6+AngularJS

本项目基于 [email protected] 版本

• 项目 github
• 快速开发项目的 webpack 脚手架

目录

• 安装与基础配置
• 常用插件
• 常用加载器
• 优化结构与配置

安装与基础配置

1. 安装 webpack

# 全局中安装 - （需要使用 webpack 命令）
$ cnpm install -g webpack@3.*

# 项目中安装
$ cnpm install --save-dev webpack@3.*

cnpm 为使用淘宝的镜像。使用命令 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装～

2. 新建入口文件

// ./index.js
alert('Hello world!');

3. 新建配置文件

// ./webpack.config.js
module.exports = {

    // 入口文件
    entry: __dirname + '/index.js',

    // 开发模式记录错误信息
    devtool: 'inline-source-map',

    // 输出文件
    output: {
        path: __dirname + '/dist',
        filename: 'bundle-[hash].js'
    }

};

4. 运行测试

$ webpack

Hash: 7ac8e5097f8728f373f3
Version: webpack 3.10.0
Time: 83ms
                         Asset    Size  Chunks             Chunk Names
bundle-7ac8e5097f8728f373f3.js  2.5 kB       0  [emitted]  main
   [0] ./index.js 22 bytes {0} [built]

常用插件

1. 自动清理打包目录的插件

$ cnpm install --save-dev clean-webpack-plugin

// ./webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    ...
    // 加载模块
    plugins: [
        new CleanWebpackPlugin(['dist'])
    ]
};

2. 自动生成模板插件

$ cnpm install --save-dev html-webpack-plugin

// ./webpack.config.js
...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    // 加载模块
    plugins: [
        ...
        new HtmlWebpackPlugin()
    ]
};

3. 新建入口默认模板

// ./index.html



    
    





// ./webpack.config.js
new HtmlWebpackPlugin({
    filename: 'index.html',
    // 使用默认模版
    template: __dirname + '/index.html'
})

4. webpack 开发服务器

$ cnpm install --save-dev webpack-dev-server webpack-cli

// ./webpack.config.js
...
module.exports = {
    ...
    devServer: {
        // 服务器文件路径
        contentBase: './dist',
        // 不跳转url
        historyApiFallback: true,
        // inline模式url不用变化
        inline: ture,
        // 热更新
        hot: true,
        // 开启GZIP
        compress: true,
    }
    ...
}

// 增加 start 命令
// ./package.json
"scripts": {
    ...
    "start": "webpack-dev-server --open"
}

webpack4.0 之后依赖 webpack-cli。

5. 运行测试

$ npm start
// 浏览器弹出‘Hello world!’测试成功

6. 整理项目目录

新建 app 文件夹，将index.js，index.html整理在里面，修改webpack.config.js:

// ./webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    // 入口
    entry: __dirname + '/app/index.js',

    // 输出
    output: {
        path: __dirname + '/dist',
        filename: 'bundle-[hash].js'
    },

    // server
    devServer: {
        contentBase: __dirname + '/dist',
    },

    // 插件
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: 'app/index.html'
        }),
    ]
};

常用加载器

1. 安装样式加载模块

$ cnpm install --save-dev style-loader css-loader less-loader less

// ./webpack.config.js
module.exports = {

    ...

    // 模块
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    // 顺序是从最后一个开始解析
                    // less-loader => css-loader => style-loader
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            }
        ]
    },

    ...
};

这里用到 less，如果用到其他的样式处理，需要其他的安装加载器。例如 sass-loader。

2. 将样式文件打包为单个文件

$ cnpm install --save-dev extract-text-webpack-plugin

// ./webpack.config.js
...
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {

    ...
    // 模块
    module: {
        rules: [
            {
                test: /\.less$/,
                // 打包为单独文件
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            }
        ]
    },

    // 插件
    plugins: [
        ...
        new ExtractTextWebpackPlugin('style.css')
    ]
};

3. 安装文件加载器

一般样式文件与 js 中引入的一些图片与字体文件等需要文件加载器。

cnpm install --save-dev file-loader

// ./webpack.config.js
module: {
    rules: [
        ...
        {
            test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
            use: {
                loader: 'file-loader'
            }
        }
    ]
},

4. babel 转译 es6 为 es5

$ cnpm install babel-loader babel-core babel-preset-es2015 webpack`

// ./webpack.config.js
module.exports = {
    ...
    // 模块
    module: {
        rules: [
            ...
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    ...
};

5. 压缩代码

// 压缩js
// ./webpack.config.js
plugins: [
    ...
    new webpack.optimize.UglifyJsPlugin()
]

// 压缩css
// ./webpack.config.js
module: {
    rules: [
        {
            test: /\.less$/,
            // 打包为单独文件，minimize压缩代码
            use: ExtractTextWebpackPlugin.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { minimize: true } },
                    { loader: 'less-loader' }
                ],
            })
        },
    ]
}

优化结构与配置

主要将 js，css，font，image 等打包分开与打包的文件名的 hash 更新，以及将第三方模块独立打包。

模块化第三方库

1. 安装第三方库

$ cnpm install --save angular @uirouter/angularjs bootstrap angular-ui-bootstrap

2. 配置第三方样式文件单独打包

// ./app/index.js
import 'bootstrap/dist/css/bootstrap.css';

// ./webpack.config.js
...
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// 第三方引入的css
var BaseCss = new ExtractTextWebpackPlugin('base.min.css');
// 自定义的css
var AppCss = new ExtractTextWebpackPlugin('app-[hash].css');

module.exports = {

    ...

    // 模块
    module: {
        rules: [
            {
                test: /\.less$/,
                exclude: /node_modules/,
                // 打包为单独文件
                use: BaseCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        { loader: 'less-loader' }
                    ],
                })
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                use: AppCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                    ]
                })
            },
            ...
        ]
    },

    // 插件
    plugins: [
        ...
        BaseCss, AppCss
    ]
};

样式文件的分类使用了一个策略：声明了两个 ExtractTextWebpackPlugin 实例，以 include 与 exclude 方式隔离第三方库的 css 文件。

3. 整理样式目录

将 css 文件放入 dist/css 中，将字体文件放入 dist/font 中，这里修改了 output 里面的 publicPath，css 文件路径，字体文件路径都会读取这个路径。

// ./webpack.config.js
...
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// 第三方引入css
var BaseCss = new ExtractTextWebpackPlugin('css/base.min.css');
var AppCss = new ExtractTextWebpackPlugin('css/app-[hash].css');

module.exports = {

    ...

    // 输出
    output: {
        path: __dirname + '/dist',
        filename: 'bundle-[hash].js',
        publicPath: '/'
    },

    ...

    // 模块
    module: {
        rules: [
            ...
            {
                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts/'
                    }
                }
            }
        ]
    },
    ...
};

$ webpack 查看打包后台的目录是否正确，$ npm start 查看服务器上路径是否引用正确

4. 打包第三方 js 库

提取第三方 js 库至单独文件。

// ./app/index.js
import angular from 'angular';
import uirouter from '@uirouter/angularjs';
import uibootstrap from 'angular-ui-bootstrap';

// ./webpack.config.js
...

module.exports = {

    // 入口
    entry: {
        vendor: ['angular', '@uirouter/angularjs', 'angular-ui-bootstrap'],
        app: __dirname + '/app/index.js'
    },

    ...

    // 插件
    plugins: [
        ...
        // 提取第三方模块
        new webpack.optimize.CommonsChunkPlugin({
            // 对应的entry数组vendor
            name: 'vendor',
            filename: 'js/vendor.min.js'
        })
    ]
};

由于第三方的库文件比较大，并且不是频繁的更新，所以打包为单独的文件可以缓存在浏览器中，在每次迭代时可以节省一笔开销。

优化缓存和配置

1. 优化文件 hash 更新

js 文件使用[chunkhash:6]，css 文件使用[contenthash:6]，字体文件使用[hash:6]。

...
// 第三方引入css
var BaseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');
var AppCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');

module.exports = {

    ...

    // 输出
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name]-[chunkhash:6].js',
        publicPath: '/'
    },

    ...

    // 模块
    module: {
        rules: [
            ...
            // 加载字体文件
            {
                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts/',
                        name: '[hash:6].[ext]'
                    }
                }
            }
        ]
    },

    // 插件
    plugins: [
        ...
        // 提取公共模块
        new webpack.optimize.CommonsChunkPlugin({
            // 对应的entry数组vendor
            name: 'vendor',
            filename: 'js/vendor-[chunkhash:6].js'
        })
    ]
};

2. 新建开发模式和生产模式

开发模式 webpack.dev.js 需要快速响应文件变化，打印错误信息；生产模式 webpack.prod.js 需要压缩代码，优化体积。

配置文件需要使用工具 webpack-merge，先安装：

$ cnpm install --save-dev webpack-merge

• webpack.common.js 公共配置

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    // 输出
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name]-[chunkhash:6].js',
        publicPath: '/'
    },

    // 模块
    module: {
        rules: [
            // 转义es6为es5
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            // 加载字体文件
            {
                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts/',
                        name: '[hash:6].[ext]'
                    }
                }
            }
        ]
    },

    // 插件
    plugins: [
        // 清理打包目录
        new CleanWebpackPlugin(['dist/**/**'], {
            root: __dirname
        }),
        // 生成入口模板
        new HtmlWebpackPlugin({
            template: 'app/index.html'
        })
    ]
};

• webpack.dev.js 开发模式

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    // 入口
    entry: {
        app: __dirname + '/app/index.js'
    },

    // 开发模式记录错误信息
    devtool: 'inline-source-map',

    // server
    devServer: {
        contentBase: __dirname + '/dist',
    },

    // 模块
    module: {
        rules: [
            // less,css加载器，为app自定义文件
            {
                test: /(\.less|\.css)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
        ]
    }

});

• webpack.prod.js 生产模式

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// 第三方引入css
var BaseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');
var AppCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');

module.exports = merge(common, {
    // 入口
    entry: {
        vendor: ['angular', '@uirouter/angularjs', 'angular-ui-bootstrap'],
        app: __dirname + '/app/index.js'
    },

    // 用于生产环境错误信息日志
    devtool: 'source-map',

    // 模块
    module: {
        rules: [
            // less加载器，为app自定义文件
            {
                test: /\.less$/,
                exclude: /node_modules/,
                // 打包为单独文件
                use: AppCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        { loader: 'less-loader' }
                    ],
                })
            },
            // css加载器，这里是对第三方库进行单独打包
            {
                test: /\.css$/,
                include: /node_modules/,
                use: BaseCss.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                    ]
                })
            }
        ]
    },

    // 插件
    plugins: [
        // css模块
        BaseCss, AppCss,
        // 压缩js文件
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true
        }),
        // 提取公共模块
        new webpack.optimize.CommonsChunkPlugin({
            // 对应的entry数组vendor
            name: 'vendor',
            filename: 'js/vendor-[chunkhash:6].js'
        }),
        // 设置node生产环境变量进行代码优化
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
});

3. 配置文件结构整理

新建 ./build 文件夹，将 webpack.dev.js，webpack.common.js，webpack.prod.js 放入该文件夹。

./build
    - webpack.common.js
    - webpack.dev.js
    - webpack.prod.js

4. 定义 scripts 命令

// ./package.json
"scripts": {
    "start": "webpack-dev-server --open --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
}

OVER...