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')
  ]
}