标签:plugin 配置 环境 js webpack eslint loader css
提取css成单独文件
默认情况下css会打包到js中,如果css代码过多会导致js文件过大;并且在页面加载时是先加载JS,再创建style标签引入css样式,导致页面会出现"闪屏"现象。如果有一种可以将css从js代码中提取出来,这样就可以减小文件的体积。
步骤:
- 创建src目录,用于存放源码
- 创建
css/index.css
和src/index.js
文件,并在index.js
文件中引入css。webpack在分析有依赖的资源才会加入打包文件中 - 创建
index.html
。使用html-webpack-plugin插件自动引入打包生成的资源,查看效果 - webpack配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins:[
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: 'css/built.css'
})
],
module:{
rules:[
{
test:/\.css$/,
use:[
// 取代style-loader。作用:提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
}
}
- 安装开发依赖
npm i mini-css-extract-plugin@0.9.0 -D
- 打包
webpack
总结:mini-css插件是通过link标签引入,而不是通过style标签引入,不会出现闪屏现象;
CSS压缩
https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
步骤:
- 安装开发时依赖
npm i optimize-css-assets-webpack-plugin@5.0.3 -D
- webpack配置
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
plugins:[
new OptimizeCssAssetsWebpackPlugin()
]
}
- 打包
webpack
JS语法检查
Airbnb,团队合作时进行代码的规范
步骤:
- 安装开发时依赖
npm i eslint-loader@3.0.3 eslint@6.8.0 eslint-config-airbnb-base@14.0.0 eslint-plugin-import@2.20.1 -D
- webpack.config.js配置
module.exports = {
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复eslint的错误
fix: true
}
}
]
}
}
package.json
中设置检查规则
{
"eslintConfig": {
"extends": "airbnb-base"
}
}
- 在入口文件中编写js不符合规范的代码进行测试
var a = 10;
console.log('hello');
- 打包测试
注意:
- 默认情况下Airbnb遇到
console.log(xx)
也会报出警告,如果想要忽略警告的话则需在输出的前一行添加// eslint-disable-next-line
标签:plugin,配置,环境,js,webpack,eslint,loader,css 来源: https://www.cnblogs.com/it774274680/p/15118264.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。