标签：MinicssExtractPlugin 知识点 style webpack4 基础 module js loader css
1.解析css,less,sass
先下载依赖包
//解析css
npm i style-loader css-loader -D
//解析less
npm i less less-loader -D
//解析sass
npm i sass sass-loader -D
module.exports={
module:{
rules:[
{
test/\.css$/,
use:[
'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
'css-loader']
},
{
test: /\.less$ /,
use: [
'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
'css-loader',
'less-loader']
},
{
test: /\.sass$ /,
use: [
'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
'css-loader',
'sass-loader']
},
]
}
}
2.解析图片和字体
先下载依赖包
npm i file-loader -D
module.exports={
module:{
rules:[
{
test: /\.(jpg|png|svg|gif)$/, //图片
use: [{
loader: 'file-loader',
options: {
outputPath:'images/',//输出到images文件夹
limit:500, //是把小于500B的文件打成Base64的格式，写入JS
name: '[name].[hash:7].[ext]',//ext为后缀，hash是md5生成的24位字符串，:7表示取前七位
}]
}，
{
test: /\.(woff|woff2|eot|ttf|otf)$/, //字体
use: [{
loader: 'file-loader',
options: {
limit: 10000,
name: '[name].[hash:7].[ext]',
}]
}
]
}
}
url-loader也可以处理图片和字体，可以设置较小资源自动base64（base64的好处就是减少http请求次数，优化页面加载性能），其内部也用到了file-loader
3.postcss autoprefixer插件自动补齐css3前缀
下载插件
npm i postcss-loader autoprefixer -D
方法一：
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [ //一定要注意这里是[ ]
require('autoprefixer')({
overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']
})
]
}
}
]
},
]
}
}
方法二：
添加一个.browserslistrc配置文件
last 5 version
> 1%
ios 7
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}
]
},
]
}
}
方法三：
在package.json中增加如下配置
{
"browserslist":[
"last 5 version",
"> 1%",
"ios 7"
]
}
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}
]
},
]
}
}
4.压缩css,js,html
先下载依赖包
npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin cssnano -D
webpack.config.js
const path = require('path');
//html扩展包
const HtmlWebpackPlugin = require('html-webpack-plugin');
//从js中提取css到单独的文件
const MinicssExtractPlugin = require('mini-css-extract-plugin');
//压缩css
const OtimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
mode:'development', //——>指定当前构建环境
entry:[
app:'./path/app.js',
admin:'./path/admin.js'
],
output:{
filename:'[name].js',
path:path.join(__dirname,'dist');
}，
module:{
rules:[
{
test: /\.css$/,
use: [MinicssExtractPlugin.loader, 'css-loader'] //此处用MinicssExtractPlugin.loader替代'style-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({ //———>放在plugins数组里
template:path.join(__dirname,'src/admin.html'),
filename:'admin.html',
chunks:['admin'], //我的理解是一个入口就是一个chunk
inject:true, //是否注入css,js,true表示在打包完成的 admin.html 内自动引入 chunks 为 admin 的css,js
minify:{ //压缩html
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
minifyCss:true, //——>此处的minifyCss/js是为了压缩admin.html页面内的内嵌css/js,并不会对外链的css/js有影响
minifyJs:true
}
}),
// 提取并压缩css
new MinicssExtractPlugin({
filename: config.cssOutputPath
}),
// 压缩css
new OtimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano') //此处压缩css代码配合cssnao
}),
]
}
5.自动清理构建目录
下载插件：
npm i clean-webpack-plugin -D
webpack.config.js
const path = require('path');
//自动清理构建目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
plugins:[
new CleanWebpackPlugin()
]
}
标签：MinicssExtractPlugin,知识点,style,webpack4,基础,module,js,loader,css 来源： https://blog.csdn.net/weixin_29491885/article/details/100532920
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。