将样式输出为文件
注意:抽取样式后,就不会使用style-loader注入css到HTML了。
- 安装:
npm i -D mini-css-extract-plugin
- 添加loader和plugins
... const MiniCssExtractPlugin = require('mini-css-extract-plugin'); ... module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, //抽取样式 'css-loader', 'postcss-loader', 'sass-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash].css', // 设置最终输出的文件名 chunkFilename: '[id].[hash].css' }) ]
此时,可以运行npm run build 或 npx webpack
看结果
压缩css、Js
- 安装:
npm i -D optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
- 修改webpack.config.js :增加optimization
... const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); ... plugins:[ ... ], optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true }), ], minimizer: [new OptimizeCSSAssetsPlugin({})] }
将CSS文件和JS文件注入到HTML模板中
- 安装:
npm i -D html-webpack-plugin
- 修改webpack.config.js
... const HtmlWebpackPlugin = require('html-webpack-plugin'); ... plugins: [ ... new HtmlWebpackPlugin({ minify: { //压缩html配置,在development模式下先不进行压缩,到production下再进行 collapseWhitespace: false, removeComments: false, removeAttributeQuotes: false // 移除属性的引号 } }) ], optimization: { ... }
清理dist目录
- 安装:
npm i -D clean-webpack-plugin
- webpack.config.js
... const CleanWebpackPlugin = require('clean-webpack-plugin'); ... let pathsToClean = [ 'dist/*.js', 'dist/*.css', 'dist/*jpg', ] let cleanOptions = { root: '', exclude: ['index.html'], verbose: true, dry: false } plugins: [ new CleanWebpackPlugin(pathsToClean,cleanOptions), //构建前清除dist文件夹 ... ],
加载与优化图片和用base64编码图片
- 安装
npm i -D file-loader image-webpack-loader url-loader
- webpack.config.js
module: { rules: [ ... { test: /\.(png|svg|jpg|gif|jpeg|ico|woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'url-loader', // 根据图片大小,把图片优化成base64 options: { limit: 10000 } }, { loader: 'image-webpack-loader',// 先进行图片优化 options: { name: 'dist/[name].[ext]', mozjepg:{ progressive: true, quality: 65 }, optipng: { enabled: false, }, pngquant: { quality: '65-90', speed: 4 }, gifsicle: { interlaced: false, }, webp: { quality: 75 } } } ] } ] }
查找源-辅助开发
- 一般用在开发环境
- 添加
inline-source-map
module.exports = { ... devtool: 'inline-source-map', ... }
监控、热更新
- 监控变化,执行命令:
npx watch
- 热更新
- 安装:
npm i -D webpack-dev-server
- webpack.config.js
module.exports = { ... devServer: { contentBase: './dist', //文件变化后,自动打包更新到dist目录 hot: true //启用热更新 } ... }
- 运行启动webserver:
webpack-dev-server --open
- devServer其他配置:
参考文档
devServer: { clientLogLevel: 'warning', // 可能的值有 none, error, warning 或者 info(默认值) hot: true, // 启用 webpack 的模块热替换特性, 这个需要配合: webpack.HotModuleReplacementPlugin插件 contentBase: path.join(__dirname, "dist"), // 告诉服务器从哪里提供内容, 默认情况下,将使用当前工作目录作为提供内容的目录 compress: true, // 一切服务都启用gzip 压缩 host: '0.0.0.0', // 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问 0.0.0.0 port: 8080, // 端口 open: true, // 是否打开浏览器 overlay: { // 出现错误或者警告的时候,是否覆盖页面线上错误消息。 warnings: true, errors: true }, publicPath: '/', // 此路径下的打包文件可在浏览器中访问。 proxy: { // 设置代理 "/api": { // 访问api开头的请求,会跳转到 下面的target配置 target: "http://192.168.0.102:8080", pathRewrite: {"^/api" : "/mockjsdata/5/api"} } }, quiet: true, // necessary for FriendlyErrorsPlugin. 启用 quiet 后,除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。 watchOptions: { // 监视文件相关的控制选项 poll: true, // webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下,不会正常工作。例如,当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下,请使用轮询. poll: true。当然 poll也可以设置成毫秒数,比如: poll: 1000 ignored: /node_modules/, // 忽略监控的文件夹,正则 aggregateTimeout: 300 // 默认值,当第一个文件更改,会在重新构建前增加延迟 } }
babel转码
- 安装:
npm i -D babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-runtime
- webpack.config.js
rules: [ { test: /\.js$/, exclude: /(node_modules)/, // 加快编译速度,不包含node_modules文件夹内容 use: { loader: 'babel-loader' } } ]
- 项目根目录添加.babelrc文件
{ "presets": ["env"] }
最后,你可以在index.js文件中写一些ES6语法运行试试。
4️⃣. 常用loader小结
文件
raw-loader
加载文件原始内容(utf-8)val-loader
将代码作为模块执行,并将 exports 转为 JS 代码url-loader
像 file loader 一样工作,但如果文件小于限制,可以返回 data URLfile-loader
将文件发送到输出文件夹,并返回(相对)URL
JSON
转换编译
html-loader
导出 HTML 为字符串,需要引用静态资源pug-loader
加载 Pug 模板并返回一个函数jade-loader
加载 Jade 模板并返回一个函数markdown-loader
将 Markdown 转译为 HTMLreact-markdown-loader
使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件posthtml-loader
使用 PostHTML 加载并转换 HTML 文件handlebars-loader
将 Handlebars 转移为 HTMLmarkup-inline-loader
将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体,或将 CSS 动画应用于 SVG 时非常有用。
样式
style-loader
将模块的导出作为样式添加到 DOM 中css-loader
解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码less-loader
加载和转译 LESS 文件sass-loader
加载和转译 SASS/SCSS 文件postcss-loader
使用 PostCSS 加载和转译 CSS/SSS 文件stylus-loader
加载和转译 Stylus 文件
清理和测试
mocha-loader
使用 mocha 测试(浏览器/NodeJS)eslint-loader PreLoader
,使用 ESLint 清理代码jshint-loader PreLoader
,使用 JSHint 清理代码jscs-loader PreLoader
,使用 JSCS 检查代码样式coverjs-loader PreLoader
,使用 CoverJS 确定测试覆盖率
框架
vue-loader
加载和转译 Vue 组件polymer-loader
使用选择预处理器(preprocessor)处理,并且require()
类似一等模块(first-class)的 Web 组件angular2-template-loader
加载和转译 Angular 组件Awesome
更多第三方 loader,查看 awesome-webpack 列表。
5️⃣. 参考开发、生产环境配置
开发环境webpack.dev.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CleanWebpackPlugin = require('clean-webpack-plugin'); const autoprefixer = require('autoprefixer'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, './dist') }, devtool: 'inline-source-map', devServer: { clientLogLevel: 'warning', // 可能的值有 none, error, warning 或者 info(默认值) hot: true, // 启用 webpack 的模块热替换特性, 这个需要配合: webpack.HotModuleReplacementPlugin插件 contentBase: path.join(__dirname, "dist"), // 告诉服务器从哪里提供内容, 默认情况下,将使用当前工作目录作为提供内容的目录 compress: true, // 一切服务都启用gzip 压缩 host: '0.0.0.0', // 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问 0.0.0.0 port: 8085, // 端口 open: true, // 是否打开浏览器 overlay: { // 出现错误或者警告的时候,是否覆盖页面线上错误消息。 warnings: true, errors: true }, publicPath: '/', // 此路径下的打包文件可在浏览器中访问。 proxy: { // 设置代理 "/api": { // 访问api开头的请求,会跳转到 下面的target配置 target: "http://192.168.0.102:8080", pathRewrite: { "^/api": "/mockjsdata/5/api" } } }, quiet: true, // necessary for FriendlyErrorsPlugin. 启用 quiet 后,除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。 watchOptions: { // 监视文件相关的控制选项 poll: true, // webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下,不会正常工作。例如,当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下,请使用轮询. poll: true。当然 poll也可以设置成毫秒数,比如: poll: 1000 ignored: /node_modules/, // 忽略监控的文件夹,正则 aggregateTimeout: 300 // 默认值,当第一个文件更改,会在重新构建前增加延迟 } }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, // 加快编译速度,不包含node_modules文件夹内容 use: [{ loader: 'babel-loader' },{ loader: 'eslint-loader', options: { fix: true } }] }, { test: /\.(sa|sc|c)ss$/, use: [ 'style-loader', { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: (loader) => [autoprefixer({browsers: ['> 0.15% in CN']})] } }, { loader: 'sass-loader', options: { sourceMap: true } } ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'url-loader', options: { limit: 10000 } } ] }, { test: /\.(png|svg|jpg|gif|jpeg|ico)$/, use: [ { loader: 'url-loader', options: { limit: 10000 } }, { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: '65-90', speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } } } ] } ] }, plugins: [ new MiniCssExtractPlugin({filename: '[name].css', chunkFilename: '[id].css'}), new CleanWebpackPlugin(['dist']), new webpack.NamedModulesPlugin(), // 更容易查看(patch)的依赖 new webpack.HotModuleReplacementPlugin(), // 替换插件 new HtmlWebpackPlugin({ minify: { collapseWhitespace: true, removeComments: true, removeAttributeQuotes: true, // 移除属性的引号 }, template: path.resolve(__dirname, 'src/index.html') }) ], optimization: {} };
生产环境webpack.prod.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const CleanWebpackPlugin = require('clean-webpack-plugin'); const autoprefixer = require('autoprefixer'); module.exports = { mode: 'production', entry: './src/index.js', output: { filename: 'main.[hash].js', path: path.resolve(__dirname, './dist') }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, // 加快编译速度,不包含node_modules文件夹内容 use: [{ loader: 'babel-loader' },{ loader: 'eslint-loader', options: { fix: true } }] }, { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: (loader) => [autoprefixer({browsers: ['> 0.15% in CN']})] } }, { loader: 'sass-loader' } ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'url-loader', options: { limit: 10000 } } ] }, { test: /\.(png|svg|jpg|gif|jpeg|ico)$/, use: [ 'file-loader', { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: '65-90', speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } } } ] } ] }, plugins: [ new MiniCssExtractPlugin({filename: '[name][hash].css', chunkFilename: '[id][hash].css'}), new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src/index.html'), minify: { collapseWhitespace: true, removeComments: true, removeAttributeQuotes: true, // 移除属性的引号 } }) ], optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true // set to true if you want JS source maps }), new OptimizeCSSAssetsPlugin({}) ] } };
你可以通过npx webpack --config webpack.dev.js
或npx webpack --config webpack.prodjs
在构建时执行不同环境下的配置文件。当然,你最好是在package.json文件中添加脚本来便捷执行:
"scripts":{ "dev":"npx webpack --config webpack.dev.js", "prod":"npm webpack --config webpack.prod.js" }
以后只需执行:npm run dev
或npm run prod
6️⃣. 相关构件工具: gulp & fis3