webpack4.0(03.css , less 样式引入处理)

处理css

npm i css-loader style-loader -D

处理less

npm i less-loader


抽离css文件，通过link引入

npm i mini-css-extract-plugin -D


压缩css和js

用了mini-css-extract-plugin抽离css为link
需使用optimize-css-assets-webpack-plugin进行压缩css,
使用此方法压缩了css需要uglifyjs-webpack-plugin压缩js
压缩css 需要在生产模式下

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

module.exports = {
optimization: { // 优化项
minimizer: [
new UglifyJsPlugin({ // 优化js
cache: true, // 是否缓存
parallel: true, // 是否并发打包
// sourceMap: true // 源码映射 set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}) // css 的优化
]
},
mode: 'production', //生产环境下才会压缩css代码
entry: '',
output: {},
}

给css加上兼容浏览器的前缀

npm i postcss-loader autoprefixer -D
postcss 需要配置文档 postcss.config.js 配置如下

module.exports = {
plugins: [
require('autoprefixer')
]
}