webpack4常用片段
Posted 金振宗
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack4常用片段相关的知识,希望对你有一定的参考价值。
webpack 4常用
初始化
npm init
// Webpack 4.0以后需要单独安装
npm install webpack webpack-cli --save-dev
基础的config
entry: ‘./src/index.js‘, mode: ‘development‘, output: { filename: ‘main.js‘, path: path.resolve(__dirname, ‘dist‘) }
字段说明
- entry : 入口文件。一般是一个string,多个可以使用数组或者json
entry:"a.js"; entry:["a.js","b.js"]; entry:{ index:["a.js"], index2:["b.js"] }
- output : 出口文件 json
output : { fileName:"a.js", path:path.resolve(__dirname,"dist"); }
- mode 提供 mode 配置选项
mode : production;
mode : development;
- loader 用于对模块的源代码进行转换
module:{ rules:[ { test:/.css$/, use:[ { loader:"style-loader" }, { loader: ‘css-loader‘, options: { modules: true } } ] } ] }
- plugin 插件目的在于解决 loader 无法实现的其他事。
plugin : [ new webpack.optimize.UglifyJsPlugin(), new htmlWebpackPlugin({template: ‘./src/index.html‘}) ]
webpack常用
module.noParse
防止 webpack 解析那些符合匹配条件的文件,忽略的文件夹中不应该含有 import、require、define的调用,或任何其他导入机制,忽略的 library 可以提高构建效率。
开启sourceMap
css在cssloader的option设置{sourceMap:true},js在 devtool: ‘inline-source-map‘
module.exports = { entry:"./index.js", output:{ filename:"[name].js" }, module:{ rules:[ { test:/.(sc|c|sa)ss$/, use:[ { loader:"css-loader", options:{ sourceMap: true } } ] } ] }, devtool:"source-map" }
devtool可选值
1. source-map
2. inline-source-map
3. inline-cheap-source-map
4. inline-cheap-module-source-map
5. eval
热更新(webpack.HotModuleReplacementPlugin)
const webpack = require(‘webpack‘); module.exports = { devServer: { contentBase: path.join(__dirname, ‘dist‘), //本地服务器所加载的页面所在的目录 clinetLogLevel: ‘warning‘, // 可能值有 none, error, warning 或者 info (默认值) hot:true,//启动热更新替换特性,需要配合 webpack.HotModuleReplacementPlugin 插件 host:‘0.0.0.0‘, // 启动服务器的 host port:7000, // 端口号 compress:true, // 为所有服务启用gzip压缩 overlay: true, // 在浏览器中显示全屏覆盖 stats: "errors-only" ,// 只显示包中的错误 open:true, // 启用“打开”后,dev服务器将打开浏览器。 proxy: { // 设置代理 "/api": { target: "http://localhost:3000", pathRewrite: {"^/api" : ""} } } }, plugins::[ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ] } // package.json { ..... script:{ "dev":"webpack-dev-server --config webpack.dev.js" } ..... }
别名替换(resolve.alias)
给定对象的键后的末尾添加 $,以表示精准匹配
module.exports = { resolve:{ alias:{ ‘@src‘:path.resolve(__dirname, ‘src/‘) } } }
resolve 可配置参数:
aliasFields
enforceExtension如果设置为true则不许可引入无扩展名的文件 例如 false可以使用require("./index") true 则必须require("./index.js");
extensions 自动解析确定扩展名 默认值为 [".js",".json"],在导入语句没带文件后缀时,Webpack 会自动带上后缀后去尝试访问文件是否存在。
css单独打包(mini-css-extract-plugin)
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); module: { rules: [ { test: /.(sc|c|sa)ss$/, use: [ MiniCssExtractPlugin.loader, { loader:"css-loader", options:{ sourceMap: true } }, ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: ‘[name].css‘, // 最终输出的文件名 chunkFilename: ‘[id].css‘ }) ]
压缩js和css(uglifyjs-webpack-plugin、optimize-css-assets-webpack-plugin)
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);//压缩js const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);//压缩css module.exports = { // ... 省略 plugins: [ // ... 省略 new OptimizeCssAssetsPlugin({}), new UglifyJsPlugin({ //当 JS 没有发生变化则不压缩 cache: true, //是否启用并行压缩; parallel: true, sourceMap: true }) ], }
引入动态文件、处理html(hash)(HtmlWebpackPlugin)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); plugins: [ new HtmlWebpackPlugin({ title: "title!", // 生成的文件标题 filename: "main.html", // 最终生成的文件名 minify: { // 压缩选项 collapseWhitespace: true, // 移除空格 removeComments: true, // 移除注释 removeAttributeQuotes: true, // 移除双引号 } }) ],
清理目录(clean-webpack-plugin)
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘); plugins: [ new CleanWebpackPlugin() ],
图片处理和优化(file-loader(处理)、image-webpack-loader(优化))
module: { { test: /.(png|svg|jpg|jpeg|gif)$/, include: [path.resolve(__dirname, ‘src/‘)], 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 } } }, ] }] },
图片 base64 处理(url-loader 不能和image-webpack-loader一起使用)
module: { { test: /.(png|svg|jpg|jpeg|gif)$/, include: [path.resolve(__dirname, ‘src/‘)], use: [ { loader: ‘url-loader‘, // 根据图片大小,把图片转换成 base64 options: { limit: 10000 }, }, ] }] },
字体处理(file loader)
module: { { test: /.(woff|woff2|eot|ttf|otf)$/, include: [path.resolve(__dirname, ‘src/‘)], use: [ ‘file-loader‘ ] } },
配置合并和提取公共配置(webpack-merge)
const merge = require(‘webpack-merge‘); const common = require(‘./webpack.common.js‘); let devConfig = { // configs... } module.exports = merge(common, devConfig)
设置代理
devServer: { // ... 省略其他 proxy: { "/api": { // 以 ‘/api‘ 开头的请求,会跳转到下面的 target 配置 target: "http://192.168.30.33:8080", pathRewrite: { "^api": "/mock/api" } } }
配置外部拓展(externals)
当我们使用 CDN 引入 jquery 时,我们并不想把它也打包到项目中,我们就可以配置 externals 外部拓展的选项,来将这些不需要打包的模块从输出的 bundle 中排除:<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
配置 externals:module.exports = { // ... 省略其他 externals: { jquery: ‘jQuery‘ }, }
打包分析报表及优化总结(webpack-bundle-analyzer)
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }
分割代码(SplitChunksPlugin)(针对复用的体积大于30k)
{ optimization.splitchunks参数:{ minSize 分离后的最小块文件大小,单位为字节 minChunks 分离前,该块被引入的次数(也就是某个js文件通过import或require引入的次数) maxInitialRequests 一个入口文件可以并行加载的最大文件数量 maxAsyncRequests 内层文件(第二层)按需加载时最大的并行加载数量 name 用以控制分离后代码块的命名,当存在匹配的缓存组(后面会说到)时,命名使用缓存组中的name值,若不存在则为 [来源]~[入口的key值].js 的格式 automaticNameDelimiter 修改上面的 “~” , 若改为: “-” 则分离后的js默认命名规则为 [来源]-[入口的key值].js test 用于规定缓存组匹配的文件位置,test: /node_modules/ 即为匹配相应文件夹下的模块 cacheGroups 名字叫做缓存组,其实就是存放分离代码块的规则的对象,叫做cacheGroup的原因是webpack会将规则放置在cache流中,为对应的块文件匹配对应的流,从而生成分离后的块。 chunks 匹配的块的类型:initial(初始块),async(按需加载的异步块),all(所有块) } } optimization: { runtimeChunk: { "name": "manifest" }, splitChunks: { chunks: ‘all‘, cacheGroups: { common: { minChunks: 2, name: ‘commons‘, chunks: ‘async‘, priority: 10, reuseExistingChunk: true, enforce: true } } } }
打包一个可以被import的js
output: { library: "myDemo",//如果在 HTML 页面中使用script标签引入打包结果文件,那么变量myDemo对应的值将会是入口文件(entry file)的返回值。 libraryTarget: "commonjs2" }
libraryTarget:
-
"var" - 以直接变量输出(默认library方式) var Library = xxx (default)
-
"this" - 通过设置this的属性输出 this["Library"] = xxx
-
"commonjs" - 通过设置exports的属性输出 exports["Library"] = xxx
-
"commonjs2" - 通过设置module.exports的属性输出 module.exports = xxx
-
"amd" - 以amd方式输出
-
"umd" - 结合commonjs2/amd/root
全局引入包(ProvidePlugin)
plugins: [ //提供全局的变量,在模块中使用无需用require,import引入 new webpack.ProvidePlugin({ $: "jquery", jQuery: ‘jquery‘ }), ]
全局常量(DefinePlugin)
plugins: [ new webpack.DefinePlugin({ ‘url‘:‘www.baidu.com‘ }), ]
copy文件(copy-webpack-plugin)
npm install --save-dev copy-webpack-plugin const CopyWebpackPlugin = require(‘copy-webpack-plugin‘); new CopyWebpackPlugin([ { from:__dirname+‘/public/lib‘, to:__dirname+‘/build/lib‘ } ])
优化模块查找路径 resolve.modules
Webpack的resolve.modules配置模块库(即 nodemodules)所在的位置,在 js 里出现 import ‘vue‘ 这样不是相对、也不是绝对路径的写法时,会去 nodemodules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个 nodemodules,且是在项目根目录,为了减少搜索范围,可以直接写明 nodemodules 的全路径
const path = require(‘path‘); function resolve(dir) { // 转换为绝对路径 return path.join(__dirname, dir); } resolve: { modules: [ // 优化模块查找路径 path.resolve(‘src‘), path.resolve(‘node_modules‘) // 指定node_modules所在位置 当你import 第三方模块时 直接从这个路径下搜索寻找 ] }
配置好src目录所在位置后,由于util目录是在src里面 所以可以用下面方式引入util中的工具函数// main.js import dep1 from ‘util/dep1‘; import add from ‘util/add‘;
多线程打包(较小项目不建议,反而会慢)
const HappyPack = require(‘happypack‘); const os = require(‘os‘); // node 提供的系统操作模块 // 根据我的系统的内核数量 指定线程池个数 也可以其他数量 const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().lenght}) module: { rules: [ { test: /.js$/, use: ‘happypack/loader?id=babel‘, exclude: /node_modules/, include: path.resolve(__dirname, ‘src‘) } ] }, plugins: [ new HappyPack({ // 基础参数设置 id: ‘babel‘, // 上面loader?后面指定的id loaders: [‘babel-loader?cacheDirectory‘], // 实际匹配处理的loader threadPool: happyThreadPool, verbose: true }), new Happypack({其他loader配置}) ]
以上是关于webpack4常用片段的主要内容,如果未能解决你的问题,请参考以下文章