webpack4.0从零开始单页（多页）应用配置 (一)
webpack4.0从零开始单页（多页）应用配置(二)
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;
以下是官网给出的对比：
Compared to the extract-text-webpack-plugin:
- 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-analyzerwebpack.prod.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; plugins:[ //忽略 new BundleAnalyzerPlugin() ]以上基本上就是webpack+vue的一些常用的东西了，基本上可以满足简单项目的一个使用，感谢阅读~如有不足地方请留言讨论(p≧w≦q)
---------------------------------------------------项目源码