4、webpack抽离css为单独文件,压缩css、生成样式前缀
2019-07-26 本文已影响5人
圆梦人生
上篇文章webpack能处理css文件,但是css还不能提取到单独文件中,本文针对样式添加如下操作:
- 1、安装插件提取到单独文件
yarn add mini-css-extract-plugin -D // 添加相关配置: plugins: [ // 抽离css为单独文件 new MiniCssExtractPlugin({ filename: 'main.css' }) ], module: { rules: [ { test: /\.css$/, //匹配css文件 use: [ MiniCssExtractPlugin.loader, 'css-loader'] }, { test: /\.less$/, //匹配less文件 use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] } ] }
- 2、安装自动生成css前缀插件
yarn add postcss-loader autoprefixer -D 1、相关配置: module: { rules: [ { test: /\.css$/, //匹配css文件 use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ] },{ test: /\.less$/, //匹配less文件 use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader'] } ] } 2、新建postcss.config.js: module.exports= { plugins: [ require('autoprefixer') ] } 3、package.json添加,如果不添加不会生成样式前缀: "browserslist": [ "last 100 versions" ]
- 3、安装样式压缩插件
yarn add optimize-css-assets-webpack-plugin -D 配置: // 压缩 model 必须是production才有效果 module.exports = { optimization: { minimizer: [ new OptimizeCssPlugin() ] }, mode: 'production', plugins: [ // 不使用optimization配置话,可以在插件里配置压缩 //new OptimizeCssPlugin() ] }
webpack.config.js 完整配置
// webpack是node写出来的, 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);
// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
// 抽离css为单独文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 导入样式压缩
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
// webpack相关配置
module.exports = {
// 压缩 model 必须是production才有效果
optimization: {
minimizer: [
new OptimizeCssPlugin()
]
},
// 开发服务的配置
devServer: {
// 端口,默认8080
port: '8099',
// 进度条
progress: true,
// 启动后访问目录,默认是项目根目录,这个设置到打包后目录
contentBase: './build',
// 启动压缩
//compress: true
},
// 模式,2种:生产模式(production)和开发模式(development)
// 开发模式不压缩打包后代码,生产模式压缩打包后代码
mode: 'development',
// 入口,表示从哪里开始打包
entry: './src/index.js',
// 表示出口(输出后文件相关配置)
output: {
// 打包后的文件名,产生哈希
//filename: 'bundle.[hash].js',
// 哈希8位
filename: 'bundle.[hash:8].js',
// 输出后的路径(必须是一个绝对路径)
path: path.resolve(__dirname, 'dist')
},
// 插件配置
plugins: [
new HtmlWebpackPlugins({
// 模板位置
template: 'index.html',
// 文件名
filename: 'index.html',
// 生产开启,压缩代码
// minify: {
// // 删除html双引号
// removeAttributeQuotes: true,
// // 压缩成一行
// collapseWhitespace: true
// },
// 文件哈希
//hash: true
}),
// 抽离css为单独文件
new MiniCssExtractPlugin({
filename: 'main.css'
})
// 压缩css
//new OptimizeCssPlugin()
],
// 模块处理
module: {
// loader
rules: [
{
test: /\.css$/, //匹配css文件
// css-loader 处理css文件@import嵌套
// style-loader 把css插入header
// 多个loader需要数组,单个可写成字符串
// loader顺序:从右向左执行,从下到上,单个loader可添加更多配置,使用对象形式
// use: [{loader: 'style-loader', options: ...}, 'css-loader']
// use: [{
// loader: 'style-loader',
// options: {
// // 样式插入到顶部
// insertAt: 'top'
// }
// }, 'css-loader']
// css-load处理完 再 抽离,从后往前执行loader
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
},
{
test: /\.less$/, //匹配less文件
// css-loader 处理css文件@import嵌套
// style-loader 把css插入header
// 多个loader需要数组,单个可写成字符串
// loader顺序:从右向左执行,从下到上,单个loader可添加更多配置,使用对象形式
// use: [{loader: 'style-loader', options: ...}, 'css-loader']
// use: [{
// loader: 'style-loader',
// options: {
// // 样式插入到顶部
// insertAt: 'top'
// }
// }, 'css-loader', 'less-loader']
// 从后向前执行
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
}
]
}
}
如果使用了样式压缩,js不会被压缩,解决方法:
- 1、安装插件
yarn add uglifyjs-webpack-plugin -D
-2 、添加配置:
module.exports = {
// 压缩 model 必须是production才有效果
optimization: {
minimizer: [
new UglifyjsPlugin({
// 使用缓存
cache: true
}),
new OptimizeCssPlugin()
]
},
plugins: [
// 压缩js
// new UglifyjsPlugin({
// // 使用缓存
// cache: true
// })
]
}