webpack踩坑记录

1、 script引入bundle.js的位置应该在上面一行，不能在head标签中

否则会导致以下这类报错
Cannot read property 'append' of null
Cannot set property 'innerText' of null
Cannot set property 'innerHTML' of null

2、是__dirname不是_dirname

const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    }
}

3、使用file-loader打包图片的时候

（1）var img = require('./pic.jpg') 引入的是一个对象
Module {default: "./dist/f3a50ab434d49efb9445f35a6ec47ab9.jpg", __esModule: true, Symbol(Symbol.toStringTag): "Module"}
地址要取其中的default属性img.default
（2）关于路径非常容易错，可以通过打印pic.src和img.default来比较
解决方案是配置publicPath 指定目标文件的定制公共路径。

module: {
        rules: [{
            test: /\.(jpe?g|png|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    publicPath: './dist/images', //配置publicPath 指定目标文件的定制公共路径。
                    outputPath: 'images',
                    name: '[name].[ext]'
                }
            }]
        }]
    }

var img = require('./pic.jpg')

console.log(img.default);
const root = document.getElementById('root');
const pic = document.createElement('img');
pic.src = img.default;
pic.alt = 'this is a pic';
root.append(pic);
console.log(pic.src);

可以看到打印出来的结果

所以图片可以成功加载

注意，这里的index.html是在根路径下的，要是在src目录下打印结果是如下，不能加载图片的，目前还没有查到解决方法，后续补充

还有一种最简单的情况，将index.html直接放在dist目录下，就可以不用配置publicPath了，打印如下

3、使用url-loader打包图片的时候

使用url-loader是将图片转化为一个base64的形式直接在bundle.js里面引用，这时候就不存在file-loader中的那种对于路径的考虑了
但是加入limit配置的时候，需要提前安装好file-loader并且考虑好路径问题

module: {
        rules: [{
            test: /\.(jpe?g|png|gif)$/,
            use: [{
                loader: 'url-loader',   // url-loader
                options: {
                    publicPath: './dist/images',  //要是index.html在dist目录下就不需要了
                    outputPath: 'images',
                    name: '[name].[ext]',
                    limit: 10000   //限制字节
                }
            }]
        }]
    },

4、css打包的模块化 避免一个模块的css样式影响到其他模块

css-loader的options参数里面添加 modules: true 注意都写在css-loader中

       {
            test: /\.css$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    sourceMap: true,
                    importLoaders: 1,
                    modules: true
                }
            }, {
                loader: 'postcss-loader'
            }]
        }, {
            test: /\.scss$/,
            use: [
                'style-loader', {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        importLoaders: 2,
                        modules: true
                    }
                }, 
                'sass-loader',
                'postcss-loader'
            ]
        }]

（1）问题： css模块打包，但是index.js里引入index.css，而index.css里面@import 引入avatar.css ，avatar.css里面的样式无法作用，还未查到解决方法，只能说在index.js里面引入两个css，分别加入类

var img = require('./pic.jpg')
import picstyle2 from './pic.css';

function createPic() {
    const root = document.getElementById('root');
    const pic = document.createElement('img');
    pic.src = img.default;
    root.append(pic);
    pic.classList.add(picstyle2.pic);
}

export default createPic;

var img = require('./pic.jpg');
import picstyle2 from './pic.css';
import picstyle from './index.scss'
import createPic from './createPic.js'

createPic()
const root = document.getElementById('root');
const pic = document.createElement('img');
pic.src = img.default;
root.append(pic);

pic.classList.add(picstyle.pic);
pic.classList.add(picstyle2.pic);

有待解决？？？？？？？？？？？？？？？？

5、clean-webpack-plugin踩坑

报错 CleanWebpackPlugin is not a constructor
参考 https://blog.csdn.net/JsongNeu/article/details/90717675

错误写法：

const CleanWebpackPlugin = require('clean-webpack-plugin');
....
plugins: [new CleanWebpackPlugin(['dist'])]
...

正确写法

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
....
plugins: [new CleanWebpackPlugin()]
...

不用传参的话，因为默认删除的是output配置项里的path路径。

output: {
        filename: 'bundle1.js',
        path: path.resolve(__dirname, 'dist'),
    }