webpack5升级记录

记录项目从webpack4升级5时遇到的部分改动

1. 升级后的webpack版本

"webpack": "^5.65.0"
"webpack-dev-server": "^4.7.3"
"webpack-merge": "^5.8.0"

2. webpack-dev-server监听方法修改

//升级前
server.listen()
//升级后
server.startCallback()

3. CleanWebpackPlugin从插件变成内置,并可以选择需要保留的目录

new CleanWebpackPlugin([`dist/${projectName}`], {

    root: path.resolve(__dirname, '..')

})

改为

output: {

    clean: {

        keep: /lib\//, *// 保留 'lib' 下的静态资源*

    },

},

4. webpackMerge写法修改

const webpackMerge = require('webpack-merge')

webpackMerge()

改为

webpackMerge.merge()

5. ts-loader结合ForkTsCheckerWebpackPlugin改成先编译后检查方式

{
    loader: ['ts-loader']
}

改为

{
    test: /\.ts(x?)$/,
    include: getTsLoader(projectName),
    use: [
        {
        loader: 'babel-loader'
        },
        {
            loader: 'ts-loader',
            options: {
                transpileOnly: true,
            },
        },
    ],
}

new ForkTsCheckerWebpackPlugin({
    typescript:{
        //这里可以覆盖tsconfig.json里的配置，从而精确到项目地址
        configOverwrite:{
            include: [
                `./src/${projectName}/**/*`,
            ]
        }
    }
})

6. 静态资源的处理,包括图片，字体，视频，音频等内容，webpack5之后都不用写单独的loader了

//旧写法
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: [{
        loader: 'url-loader',
        options: {
            limt: 8192,
            name: `${projectName}/img/[name].[hash:4].[ext]`
        }
    }]
}

//新写法
 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    type: 'asset',
    generator: {
        filename: `${projectName}/assets/[name][hash:4][ext]`
    },
    parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024,
        }
      }
}

7. 处理dll打包的文件，并插入到html中的插件HtmlWebpackIncludeAssetsPlugin,需升级webpack5需要改成html-webpack-tags-plugin

const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
改为
const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin')

html-webpack-tags-plugin对应配置

const getDllPublicPath =(path, publicPath)=>{

    return publicPath+path

}

new HtmlWebpackTagsPlugin({

    usePublicPath: true,

    addPublicPath: (path, publicPath) =>getDllPublicPath(path, publicPath),

    tags: [{ path: 'lib', glob: '*.dll.js', globPath: 'dist/lib/' }],

    append: false,

})