共计 4199 个字符,预计需要花费 11 分钟才能阅读完成。
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-analyzer
webpack.prod.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins:[
// 忽略
new BundleAnalyzerPlugin()]
以上基本上就是 webpack+vue 的一些常用的东西了,基本上可以满足简单项目的一个使用,感谢阅读~ 如有不足地方请留言讨论(p≧w≦q)
————————————————— 项目源码