webpack出现的错误

问题一：export default __webpack_public_path__ + "source/b7231c2f09b0.less";

终端详细报错：

ERROR in ./src/css/index.less (./node_modules/.store/css-loader@4.3.0/node_modules/css-loader/dist/cjs.js!./node_modules/.store/less-loader@7.3.0/node_modules/less-loader/dist/cjs.js!./node_modules/.store/file-loader@6.2.0/node_modules/file-loader/dist/cjs.js??ref--8!./src/css/index.less)
    Module build failed (from ./node_modules/.store/less-loader@7.3.0/node_modules/less-loader/dist/cjs.js):
    
    
    export default __webpack_public_path__ + "source/2fc2e17eac87.less";
                                           ^
    Unrecognised input
          Error in E:\web\10月\webpack\01体验版\src\css\index.less (line 1, column 41)

解决方式：

排除尾缀没有排除干净，有个不该被输出的less文件被输出了 ----配置文件出错了

在webpack.config.js文件里找到module里面你用来排除的内容

{
     //排除
      exclude: /\.(css|js|html|json)$/,

      //！！！ less文件需要使用 less-loader处理

      loader: 'file-loader',
      options:{
          name:'[hash:12].[ext]',
          outputPath:"source"
      }
}

可以看到 less文件 确实没有被排除掉

file-loader不处理less  less应该由less-loader来处理

所以在exclude中 将less等尾缀加上排除掉就OK

 {
    //排除
    exclude: /\.(css|js|html|json|less|jpg|png|gif|jpeg)$/,
    //把需要排除的尾缀都塞进去看看
    loader: 'file-loader',
    options:{
         name:'[hash:12].[ext]',
         outputPath:"source"
           }
 }

OK解决

结论

1、使用file-loader时，一定要用exclude排除其他rule中包含的文件类型,否则其他rule可能不会生效

问题二：使用mini-css-extract-plugin抽离css不成功

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   
 plugins: [
        new MiniCssExtractPlugin({
            filename:'css/index.css'
        })
          ]

解决方式：

是否忘记在module中把MiniCssExtractPlugin加上

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                   // 'style-loader', 
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
                ]
            }

后续遇到再进行补充...