现在,基本上前端的项目打包都会用上 webpack,因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候,总是免不了要配置 webpack,很是麻烦。简化 webpack 配置的一种方式是使用社区封装好的库,比如 roadhog。roadhog 封装了 webpack 的一些基础配置,然后暴露一些额外配置的接口,并附加本地数据模拟功能(mock),详情可以参考 roadhog 主页。
另一种方式是自己封装 webpack,这样做自己能够更好的掌控项目。
一般搭建一个项目至少需要两种功能:本地开发调试、构建产品代码。
其他的诸如测试、部署到服务器、代码检查、格式优化等功能则不在这篇文章讲解范围,如果有意了解,可以查看我的其他文章。
package.json
dev.js # 本地开发脚本
build.js # 产品构建脚本
analyze.js # 模块大小分析(可选)
# 单页面结构
src/ # 源代码目录
- index.js # js 入口文件
- index.html # html 入口文件
- ... # 其他文件
# 多页面结构
src/ # 源代码目录
- home/ # home 页面工作空间
- index.js # home 页面 js 入口文件
- index.html # home 页面 html 入口文件
- ... # home 页面其他文件
- explore/ # explore 页面工作空间
- index.js # explore 页面 js 入口文件
- index.html # explore 页面 html 入口文件
- ... # explore 页面其他文件
- about/ # about 目录
- company # about/company 页面工作空间
- index.js # about/company 页面 js 入口文件
- index.html # about/company 页面 html 入口文件
- ... # about/company 页面其他文件
- platform # about/platform 页面工作空间
- index.js # about/platform 页面 js 入口文件
- index.html # about/platform 页面 html 入口文件
- ... # about/platform 页面其他文件
- ... # 更多页面
# package.json
"devDependencies": {
"@babel/core": "^7.1.2", # babel core
"@babel/plugin-syntax-dynamic-import": "^7.0.0", # import() 函数支持
"@babel/plugin-transform-react-jsx": "^7.0.0", # react jsx 支持
"@babel/preset-env": "^7.1.0", # es6+ 转 es5
"@babel/preset-flow": "^7.0.0", # flow 支持
"@babel/preset-react": "^7.0.0", # react 支持
"autoprefixer": "^9.1.5", # css 自动添加厂家前缀 -webkit-, -moz-
"babel-loader": "^8.0.4", # webpack 加载 js 的 loader
"babel-plugin-component": "^1.1.1", # 如果使用 element ui,需要用到这个
"babel-plugin-flow-runtime": "^0.17.0", # flow-runtime 支持
"babel-plugin-import": "^1.9.1", # 如果使用 ant-design,需要用到这个
"browser-sync": "^2.24.7", # 浏览器实例组件,用于本地开发调试
"css-loader": "^1.0.0", # webpack 加载 css 的 loader
"chalk": "^2.4.1", # 让命令行的信息有颜色
"file-loader": "^2.0.0", # webpack 加载静态文件的 loader
"flow-runtime": "^0.17.0", # flow-runtime 包
"html-loader": "^0.5.5", # webpack 加载 html 的 loader
"html-webpack-include-assets-plugin": "^1.0.5", # 给 html 文件添加额外静态文件链接的插件
"html-webpack-plugin": "^3.2.0", # 更方便操作 html 文件的插件
"less": "^3.8.1", # less 转 css
"less-loader": "^4.1.0", # webpack 加载 less 的 loader
"mini-css-extract-plugin": "^0.4.3", # 提取 css 单独打包
"minimist": "^1.2.0", # process.argv 更便捷处理
"node-sass": "^4.9.3", # scss 转 css
"optimize-css-assets-webpack-plugin": "^5.0.1", # 优化 css 打包,包括压缩
"postcss-loader": "^3.0.0", # 对 css 进行更多操作,比如添加厂家前缀
"sass-loader": "^7.1.0", # webpack 加载 scss 的 loader
"style-loader": "^0.23.0", # webpack 加载 style 的 loader
"uglifyjs-webpack-plugin": "^2.0.1", # 压缩 js 的插件
"url-loader": "^1.1.1", # file-loader 的升级版
"vue-loader": "^15.4.2", # webpack 加载 vue 的 loader
"vue-template-compiler": "^2.5.17", # 配合 vue-loader 使用的
"webpack": "^4.20.2", # webpack 模块
"webpack-bundle-analyzer": "^3.0.2", # 分析当前打包各个模块的大小,决定哪些需要单独打包
"webpack-dev-middleware": "^3.4.0", # webpack-dev-server 中间件
"webpack-hot-middleware": "^2.24.2" # 热更新中间件
}
# package.json
"scripts": {
"dev": "node dev.js",
"build": "node build.js",
"analyze": "node analyze.js",
}
npm run dev # 开发
npm run build # 构建
npm run analyze # 模块分析
如果需要支持多入口构建,在命令后面添加参数:
npm run dev -- home # 开发 home 页面
npm run analyze -- explore # 模块分析 explore 页面
# 构建多个页面
npm run build -- home explore about/* about/all --env test/prod
开发一般用需要用到下面的组件:
const minimist = require('minimist');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const devMiddleWare = require('webpack-dev-middleware');
const hotMiddleWare = require('webpack-hot-middleware');
const browserSync = require('browser-sync');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { HotModuleReplacementPlugin } = webpack;
const argv = minimist(process.argv.slice(2));
const page = argv._[0];
// 单页面
const entryFile = `${__dirname}/src/index.js`;
// 多页面
const entryFile = `${__dirname}/src/${page}/index.js`;
// 编译器对象
const compiler = webpack({
entry: [
'webpack-hot-middleware/client?reload=true', // 热重载需要
entryFile,
],
output: {
path: `${__dirname}/dev/`, // 打包到 dev 目录
filename: 'index.js',
publicPath: '/dev/',
},
plugins: [
new HotModuleReplacementPlugin(), // 热重载插件
new HtmlWebpackPlugin({ // 处理 html
// 单页面
template: `${__dirname}/src/index.html`,
// 多页面
template: `${__dirname}/src/${page}/index.html`,
}),
new VueLoaderPlugin(), // vue-loader 所需
],
module: {
rules: [
{ // js 文件加载器
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-dynamic-import',
],
},
test: /\.(js|jsx)$/,
},
{ // css 文件加载器
loader: 'style-loader!css-loader',
test: /\.css$/,
},
{ // less 文件加载器
loader: 'style-loader!css-loader!less-loader',
test: /\.less$/,
},
{ // scss 文件加载器
loader: 'style-loader!css-loader!sass-loader',
test: /\.(scss|sass)$/,
},
{ // 静态文件加载器
loader: 'url-loader',
test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf|ico)$/,
options: {
limit: 1,
},
},
{ // html 文件加载器
loader: 'html-loader',
test: /\.html$/,
options: {
attrs: ['img:src', 'link:href'],
interpolate: 'require',
},
},
{ // vue 文件加载器
loader: 'vue-loader',
test: /\.vue$/,
},
],
},
resolve: {
alias: {}, // js 配置别名
modules: [`${__dirname}/src`, 'node_modules'], // 模块寻址基路径
extensions: ['.js', '.jsx', '.vue', '.json'], // 模块寻址扩展名
},
devtool: 'eval-source-map', // sourcemap
mode: 'development', // 指定 webpack 为开发模式
});
// browser-sync 配置
const browserSyncConfig = {
server: {
baseDir: `${__dirname}/`, // 静态服务器基路径,可以访问项目所有文件
},
startPath: '/dev/index.html', // 开启服务器窗口时的默认地址
};
// 添加中间件
browserSyncConfig.middleware = [
devMiddleWare(compiler, {
stats: 'errors-only',
publicPath: '/dev/',
}),
hotMiddleWare(compiler),
];
browserSync.init(browserSyncConfig); // 初始化浏览器实例,开始调试开发
构建过程中,一般会有这些过程:
const minimist = require('minimist');
const webpack = require('webpack');
const chalk = require('chalk');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {yellow, red} = chalk;
const argv = minimist(process.argv.slice(2));
const pages = argv._; // ['home', 'explore', 'about/*', 'about/all']
const allPages = getAllPages(pages); // 根据 page 中的 `*, all` 等关键字,获取所有真正的 pages
// 单页面,只有一个入口,所以只有一个配置文件
const config = { ... };
// 多页面,多个入口,所有有多个配置文件
const configs = allPages.map(page => ({
// 单页面
entry: `${__dirname}/src/index.js`, // js 入口文件
// 多页面
entry: `${__dirname}/src/${page}/index.js`, // js 入口文件
output: {
path: `${__dirname}/dist/`, // 输出路径
filename: '[chunkhash].js', // 输出文件名,这里完全取 hash 值来命名
hashDigestLength: 32, // hash 值长度
publicPath: '/dist/',
},
plugins: [
new MiniCssExtractPlugin({ // 提取所有的样式文件,单独打包
filename: '[chunkhash].css', // 输出文件名,这里完全取 hash 值来命名
}),
new HtmlWebpackPlugin({
// 单页面
template: `${__dirname}/src/index.html`, // html 入口文件
// 多页面
template: `${__dirname}/src/${page}/index.html`,// html 入口文件
minify: { // 指定如果压缩 html 文件
removeComments: !0,
collapseWhitespace: !0,
collapseBooleanAttributes: !0,
removeEmptyAttributes: !0,
removeScriptTypeAttributes: !0,
removeStyleLinkTypeAttributes: !0,
minifyJS: !0,
minifyCSS: !0,
},
}),
new VueLoaderPlugin(), // vue-loader 所需
new OptimizeCssAssetsPlugin({ // 压缩 css
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
}),
// webpack 打包的 js 文件是默认压缩的,所以这里不需要再额外添加 uglifyjs-webpack-plugin
],
module: {
rules: [
{ // js 文件加载器,与 dev 一致
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-dynamic-import',
],
},
test: /\.(js|jsx)$/,
},
{ // css 文件加载器,添加了浏览器厂家前缀
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: [
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
],
}),
],
},
},
],
test: /\.css$/,
},
{ // less 文件加载器,添加了浏览器厂家前缀
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: [
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
],
}),
],
},
},
'less-loader',
],
test: /\.less$/,
},
{ // scss 文件加载器,添加了浏览器厂家前缀
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: [
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
],
}),
],
},
},
'sass-loader',
],
test: /\.(scss|sass)$/,
},
{ // 静态文件加载器,与 dev 一致
loader: 'url-loader',
test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf|ico)$/,
options: {
limit: 1,
},
},
{ // html 文件加载器,与 dev 一致
loader: 'html-loader',
test: /\.html$/,
options: {
attrs: ['img:src', 'link:href'],
interpolate: 'require',
},
},
{ // vue 文件加载器,与 dev 一致
loader: 'vue-loader',
test: /\.vue$/,
},
],
},
resolve: {
alias: {}, // js 配置别名
modules: [`${__dirname}/src`, 'node_modules'], // 模块寻址基路径
extensions: ['.js', '.jsx', '.vue', '.json'], // 模块寻址扩展名
},
devtool: 'source-map', // sourcemap
mode: 'production', // 指定 webpack 为产品模式
}));
// 执行一次 webpack 构建
const run = (config, cb) => {
webpack(config, (err, stats) => {
if (err) {
console.error(red(err.stack || err));
if (err.details) {
console.error(red(err.details));
}
process.exit(1);
}
const info = stats.toJson();
if (stats.hasErrors()) {
info.errors.forEach(error => {
console.error(red(error));
});
process.exit(1);
}
if (stats.hasWarnings()) {
info.warnings.forEach(warning => {
console.warn(yellow(warning));
});
}
// 如果是多页面,需要把 index.html => `${page}.html`
// 因为每个页面导出的 html 文件都是 index.html 如果不重新命名,会被覆盖掉
if(cb) cb();
});
};
// 单页面
run(config);
// 多页面
let index = 0;
// go on
const goon = () => {
run(configs[index], () => {
index += 1;
if (index < configs.length) goon();
});
};
goon();
const minimist = require('minimist');
const chalk = require('chalk');
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {yellow, red} = chalk;
const argv = minimist(process.argv.slice(2));
const page = argv._[0];
// 单页面
const entryFile = `${__dirname}/src/index.js`;
// 多页面
const entryFile = `${__dirname}/src/${page}/index.js`;
const config = {
entry: entryFile,
output: {
path: `${__dirname}/analyze/`, // 打包到 analyze 目录
filename: 'index.js',
},
plugins: [
new VueLoaderPlugin(), // vue-loader 所需
new BundleAnalyzerPlugin(), // 添加插件
],
module: {
rules: [
{ // js 文件加载器
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-dynamic-import',
],
},
test: /\.(js|jsx)$/,
},
{ // css 文件加载器
loader: 'style-loader!css-loader',
test: /\.css$/,
},
{ // less 文件加载器
loader: 'style-loader!css-loader!less-loader',
test: /\.less$/,
},
{ // scss 文件加载器
loader: 'style-loader!css-loader!sass-loader',
test: /\.(scss|sass)$/,
},
{ // 静态文件加载器
loader: 'url-loader',
test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf|ico)$/,
options: {
limit: 1,
},
},
{ // html 文件加载器
loader: 'html-loader',
test: /\.html$/,
options: {
attrs: ['img:src', 'link:href'],
interpolate: 'require',
},
},
{ // vue 文件加载器
loader: 'vue-loader',
test: /\.vue$/,
},
],
},
resolve: {
alias: {}, // js 配置别名
modules: [`${__dirname}/src`, 'node_modules'], // 模块寻址基路径
extensions: ['.js', '.jsx', '.vue', '.json'], // 模块寻址扩展名
},
mode: 'production', // 指定 webpack 为产品模式
};
webpack(config, (err, stats) => {
if (err) {
console.error(red(err.stack || err));
if (err.details) {
console.error(red(err.details));
}
process.exit(1);
}
const info = stats.toJson();
if (stats.hasErrors()) {
info.errors.forEach(error => {
console.error(red(error));
});
process.exit(1);
}
if (stats.hasWarnings()) {
info.warnings.forEach(warning => {
console.warn(yellow(warning));
});
}
});
你可以根据需要扩展配置,比如添加插件、加载器等,比如:
上面的代码可以封装成一个全局命令,比如 lila,运行上面的命令就可以更简洁:
lila dev home # 开发 home 页面
lila analyze explore # 模块分析 explore 页面
# 构建多个页面
lila build home explore about/* about/all --env test/prod
来源: https://github.com/senntyou/blogs
作者:深予之 (@senntyou)
webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。
webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。
本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。
Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件
webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。
新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!
Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块
Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。
本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!