webpack多页面配置如果js相关loader已经写了，可能是因为optimization.splitChunks配置

踩坑记录

1.运行webpack，报错

/Users/xxx/project/landing2/node_modules/_neo-async@2.6.2@neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^
    
Error: Callback was already called.

解决方案：

原因是html文件中出现了

<link rel="stylesheet" href="./css/main.css">

，应改用

import '../css/main.css';

2.webpack css中背景图片未编译

解决方案：

添加MiniCssExtractPlugin

{
    test: /\.css$/i,
    exclude: /node_modules/,
    use: [
        // 可以处理css中的背景图片
        MiniCssExtractPlugin.loader,
        'css-loader',
    ]
},

3.webpack一个html多个入口怎么处理

解决方案：

4.webpack编译link引入的css未编译

解决方案：

5.webpack html中的style背景图片未编译

解决方案：

6.webpack 打包后 js里的方法不执行

解决方案：

如果js相关loader已经写了，可能是因为optimization.splitChunks配置错了。

7.html-webpack-plugin里的chunks引入html的js，如何让一些js在head里执行呢？

解决方案：

添加inject: 'head'，这样所有的js都在head里了。

new HtmlWebpackPlugin({
    ...
    inject: 'head'
})

也可以通过改造插件来实现指定位置，segmentfault.com/q/101000000…

8.html中的scirpt不支持import等es6

解决方案：

原因是html是处于浏览器环境，浏览器解析不了require，babel不会处理html，只会处理js，可以讲html中的script放到单独的js，单独引用。

9.image-webpack-loader 报错

Expected `options.quality` to be of type `array` but received type `string`

解决方案：

{
    loader: 'image-webpack-loader',
    options: {
       ...
        pngquant: {
-            quality: '65-90',
+            quality: [0.65, 0.90],
            speed: 4
        },
       ...
    }
}

10.html中如何引用webpack编译出来的js中的变量？

解决方案：

原因在于webpack编译出来的js是一个自执行函数，定义的变量是局部变量。提升其作用域范围，使其成为全局变量。window.xxx = xxx

blog.csdn.net/HansExplora…

参考文章

此文发表于 2019 年 8 月 28 日