内容简介:安装Less, less-loader修改
css相关
项目引入Less
安装Less, less-loader
npm install --save-dev less less-loader
修改 webpack.config.js
loader配置
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.less$/, exclude: /node_modules/, use: [ 'style-loader', 'css-loader', 'less-loader', ] },
css自动添加前缀
一些css3样式需要添加各个厂家的前缀才能生效,而现在css3运用比较长见,显然我们没必要在每个地方去添加前缀。
安装: postcss-loader
与 autoprefixer
插件。
npm i --save-dev postcss-loader autoprefixer
根目录下新增 postcss.config.js
文件,并添加以下代码:
module.exports = { plugins: [ require('autoprefixer') ] }
修改webpack配置如下:
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.less$/, exclude: /node_modules/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'less-loader', ] },
postcss-loader
还可以支持许多插件,详情请查看 https://github.com/postcss/po...
提取css
webpack4.0已经用 mini-css-extract-plugin
替代了 ExtractTextWebpackPlugin
;
以下是官网给出的对比:
- Async loading
- No duplicate compilation (performance)
- Easier to use
- Specific to CSS
相对在 extract-text-webpack-plugin
的基础上配置更加简单了,打包速度也得到了提升
安装插件: npm install --save-dev vue-style-loader mini-css-extract-plugin
修改webpack.config.js配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); plugins:[ ..., new MiniCssExtractPlugin({ //提取css filename: "[name].css?v=[chunkhash]", chunkFilename: "[id].css" }) ... ]
将之前在 webpack.config.js
里加的 css
和 Less
规则移到 webpack.dev.js
文件中配置如下
{ test: /\.css$/, use: [ { loader: 'vue-style-loader', options: { fallback: 'style-loader', hmr: true, reloadAll: true, }, }, 'css-loader', ], }, { test: /\.less$/, exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader, options: { fallback: 'style-loader', hmr: true //热重载 } }, 'css-loader', 'postcss-loader', 'less-loader', ] }
同理修改 webpack.prd.js
{ test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { fallback: 'style-loader', hmr: true, reloadAll: true, }, }, 'css-loader', ], }, { test: /\.less$/, exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader, options: { fallback: 'style-loader', hmr: true //热重载 } }, 'css-loader', 'postcss-loader', 'less-loader', ] }
打包时清空dist目录
解决打包后文件目录越来越乱的问题
安装: clean-webpack-plugin
npm i --save-dev clean-webpack-plugin
new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'dist')], //打包前删除匹配文件 verbose: true, //是否日志输出 protectWebpackAssets: false, //不允许删除webpack资产 })
HappyPack
将 loader
编译单线程变为多线程,从而加快webpack的构建速度
安装 HappyPack
npm install --save-dev HappyPack
修改 webpack.config.js
配置:
const HappyPack = require('happypack'); const os = require('os'); const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length}); module:{ //忽略其他 ... rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "happypack/loader?id=babel" } } ] }, plugins: [ //忽略其他 new HappyPack({ id: 'babel', //与Loader的id对应 loaders: ['babel-loader?cacheDirectory'],//实际匹配的loader threadPool: happyThreadPool, // verbose: true }) ]
想更深入的了解 HappyPack
happypack 原理解析
optimization
optimization.splitChunks 用于替代commonsChunkPlugin,分离文件,将代码分离成多个文件
webpack.config.js添加如下配置:
optimization: { splitChunks: { //替代之前的commonsChunkPlugin chunks: 'initial', //默认async initial针对初始chunks minSize: 50, //切割完后需要新生成的chunk满足大于50kb 否则不生成新的chunk minChunks: 2, //两个地方引用后就会提取到chunks里 maxAsyncRequests: 5, // 最多5个异步请求该Module name: 'common' //生成的文件名称 } }
启用热替换模块HotModuleReplacementPlugin
webpack.dev.js增加如下配置
const webpack = require('webpack'); plugins:[ new webpack.HotModuleReplacementPlugin({}) ]
npm run dev 自动打开浏览器地址
修改pacakge.json如下:
"scripts": { "dev": "webpack-dev-server --development --open --config ./webpack.dev.js", "build": "webpack --production --config ./webpack.prod.js" }
分离vue文件
在大型项目中引用一些库是很常见的事,由于这些文件基本上是不会变的,所以需要单独分离出来,从而不用在每次发版本之后用户还需要加载此类文件,这里拿vue为例子
- 未分离vue时,可以发现vue被打到Main文件了,导致main.js体积比较大,而main.js在每次发版本之后,后缀是会变的,所以这样会比较消耗性能。
修改webpack.config.js配置
splitChunks:{ cacheGroups: { vueBase: { name: 'vueBase', test: (module) => { return /vue|vuex|vue-router$/.test(module.context); //将vue, vuex, vue-router 匹配的单独打包为vueBase }, chunks: 'initial', priority: 10 }, common: { name: 'common', chunks: 'initial', priority: 2, minChunks: 2 } } }
npm run build
多了一个vueBase文件,将vue的相关提取到单独的文件了
webpack-bundle-analyzer
webpack
对项目需要优化,还需要在实战中一步一步的完善,推荐一个插件,可视化webpack打包后的情况,然后自己做出分析看哪儿比较大然后做相对的优化~
安装:
npm i --save-dev webpack-bundle-analyzer
webpack.prod.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; plugins:[ //忽略 new BundleAnalyzerPlugin() ]
以上基本上就是webpack+vue的一些常用的东西了,基本上可以满足简单项目的一个使用,感谢阅读~如有不足地方请留言讨论(p≧w≦q)
--------------------------------------------------- 项目源码
以上所述就是小编给大家介绍的《webpack4.0从零开始单页(多页)应用配置(三) --- 辅助工具》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Bytom Kit开发辅助工具介绍
- Goland辅助工具goimports和gomodules
- Gormat - 跨平台Gopher辅助工具
- BTrace 问题辅助排查工具使用手册
- 自动化逆向辅助利器 — Capa工具介绍
- 辅助测试工具 autest v2.0.0 发布
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。