webpack打包学习笔记

webpack4打包遇到的问题

基于webpack4的基础上整理的一份打包笔记，记录了本人开发过程中遇到的一些问题和处理方法，css提取，css和html打包后使用相对路径

css文件处理，使用mini-css-extract-plugin插件提取css,

插件 mini-css-extract-plugin
安装 npm i mini-css-extract-plugin --save-dev
配置
修改webpack.dev.config.js文件
// 引入插件
const MinCssExtractPlugin = require('mini-css-extract-plugin');
配置插件作用的地方
module: {
    rules: [{
        test: /\.css$/,
        //从后面开始转化，先css再style
        //use用来处理提取的.css文件
        use: [
          {
            loader: MinCssExtractPlugin.loader,
            options: {
              publicPath: '../', // 用来处理css中图片的路径
            }
          },
          'css-loader'
        ]
      },
 	plugins: [
 		new MinCssExtractPlugin({
      //异步加载修改
      filename: '[name].css',
      allChunks: true
    }),
   ]

html和css中的图片路径问题

// 在MinCssExtractPlugin.loader插件后面跟上options单独设置css的处理路径
{
        test: /\.less$/,
        use: [{
          loader: MinCssExtractPlugin.loader,
          options: {
            publicPath: '../',
          }
}