webpack 项目实战 - ES6+AngularJS

本项目基于 webpack@3.0 版本

目录

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

安装与基础配置

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
</head>
<body>
</body>
</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...

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,864评论 6赞 494
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,175评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,401评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,170评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,276评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,364评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,401评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,179评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,604评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,751评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,380评论 3赞 319
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2赞 351