webpack5高级配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了webpack5高级配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

webpack多入口

注意：webpack5基本配置只是打包产出一个html文件，想要产出多个html就需要进行过入口的配置

webpack.common.js

注意：公共文件中的入口需要引入两个js文件

webpack5高级配置,webpack,前端,javascript,开发语言

entry: {
    index:path.join(srcPath, 'index.js'),
    other:path.join(srcPath, 'other.js'),
},

webpack.prod.js

注意：输出的时候利用[name]根据输入的文件名来确定导出的文件名称！

webpack5高级配置,webpack,前端,javascript,开发语言

output: {
    // filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
    filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
    path: distPath,
    // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
},

webpack.common.js

注意：针对多个html文件的时候我们需要生成多个html文件，需要在通过new HtmlWebpackPlugin去实现

webpack5高级配置,webpack,前端,javascript,开发语言

plugins: [
    // 多入口 - 生成 index.html
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'index.html'),
        filename: 'index.html',
        // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
        chunks: ['index']  // 只引用 index.js
    }),
    // 多入口 - 生成 other.html
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'other.html'),
        filename: 'other.html',
        chunks: ['other']  // 只引用 other.js
    })
]

测试：

新建两个文件，一个other.html,一个other.js文件

webpack5高级配置,webpack,前端,javascript,开发语言

执行npm run dev

访问http://localhost:8080/other.html

webpack5高级配置,webpack,前端,javascript,开发语言

访问http://localhost:8080/index.html webpack5高级配置,webpack,前端,javascript,开发语言

执行npm run build

注意：打包文件会分包打包出不同的文件

webpack5高级配置,webpack,前端,javascript,开发语言

webpack抽离css文件

注意：因为直接在公共文件配置css，打包时会直接将css文件全部打包到html文件的<style>标签里，这样做会影响性能所以需要做css的文件离

线下环境：

webpack.common.js

注意：去除common文件中对css所有处理，移动到dev文件中

webpack5高级配置,webpack,前端,javascript,开发语言

测试：

执行：npm run dev

注意：本地文件的css处理还是在<style>标签中

webpack5高级配置,webpack,前端,javascript,开发语言

线上环境：

安装插件：

sudo cnpm i mini-css-extract-plugin -D
//extract /ˈekstrækt , ɪkˈstrækt/提取;

webpack.prod.js

module.rules中

webpack5高级配置,webpack,前端,javascript,开发语言

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
        'css-loader',
        'postcss-loader'
    ]
},
// 抽离 less --> css
{
    test: /\.less$/,
    use: [
        MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
        'css-loader',
        'less-loader',
        'postcss-loader'
    ]
}

plugins中：

webpack5高级配置,webpack,前端,javascript,开发语言

//抽离css文件
new MiniCssExtractPlugin({
    filename:'css/main.[contentHash:8].css'
})

测试：

执行npm run build

注意打包出来的css文件不再直接打包到html文件的<style>标签上去。而是直接生成一个css的文件

webpack5高级配置,webpack,前端,javascript,开发语言

压缩css文件：

安装插件：

sudo cnpm i terser-webpack-plugin -D
sudo cnpm i optimize-css-assets-webpack-plugin -D

webpack.prod.js

optimization 里

optimization: {
    // 压缩 css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}

测试：

执行npm run dev

webpack5高级配置,webpack,前端,javascript,开发语言

注意：压缩css文件打包出来能让打包出来的css文件小3分之1

webpack压缩JS和CSS

压缩JS

注意：在optimization.minimizer里

optimization /ˌɑːptɪməˈzeɪʃn/优化;
minimizer极小;

new TerserJSPlugin({})
//Terser/ˈtɜrsər/简要的;

压缩CSS

注意：在optimization.minimizer里

new OptimizeCSSAssetsPlugin({})
//Assets/ˈæsets/资产;

整体代码：

optimization: {
    // // 压缩 css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}

webpack抽离公共代码

注意：打包的时候很多入口或代码中的公共部分抽离出来，不抽离，每个公共部分都会各种打包，这样会浪费性能。抽离公共代码就是将公共部分抽离出来，代码进行相互引用，可以减少代码执行和加载的次数。

webpack.prod.js 的optimization里

webpack5高级配置,webpack,前端,javascript,开发语言

splitChunks: {
//split/splɪt/分离;
//Chunk/tʃʌŋk/组块;

    chunks: 'all',
    /**
     * initial 入口chunk，对于异步导入的文件不处理
        async 异步chunk，只对异步导入的文件处理
        all 全部chunk
        */

    // 缓存分组
    cacheGroups: {
        // 第三方模块
        vendor: {
            name: 'vendor', // chunk 名称
            priority: 1, // 权限更高，优先抽离，重要！！！
            test: /node_modules/,
            minSize: 0,  // 大小限制
            minChunks: 1  // 最少复用过几次
        },

        // 公共的模块
        common: {
            name: 'common', // chunk 名称
            priority: 0, // 优先级
            minSize: 0,  // 公共模块的大小限制
            minChunks: 2  // 公共模块最少复用过几次
        }
    }
}

webpack.common.js

注意：配置不同的引入生成的chunk文件

webpack5高级配置,webpack,前端,javascript,开发语言

plugins: [
    // 多入口 - 生成 index.html
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'index.html'),
        filename: 'index.html',
        // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
        chunks: ['index', 'vendor', 'common']  // 只引用 index.js
    }),
    // 多入口 - 生成 other.html
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'other.html'),
        filename: 'other.html',
        chunks: ['other', 'common']  // 只引用 other.js
    })
]

测试：

安装插件：

sudo cnpm i lodash -D

import loda from 'lodash'
console.log(loda.each);

执行npm run build
打包后会生成两个公共的chunk文件

webpack5高级配置,webpack,前端,javascript,开发语言

不同的html文件<script>有不同的引入

webpack5高级配置,webpack,前端,javascript,开发语言

webpack懒加载

注意：import()直接引入即可，不需要去进行任何的配置

测试：

在src目录下新建一个promise.js文件：

webpack5高级配置,webpack,前端,javascript,开发语言

在index.js直接引入


setTimeout(() => {
    import('./promise').then(res => {
        console.log(res);
    })
}, 1500)

运行npm run dev会在1.5秒后执行promise.js文件

webpack5高级配置,webpack,前端,javascript,开发语言

执行npm run build命令会自动在dist目录下生成一个新的chunk文件

webpack5高级配置,webpack,前端,javascript,开发语言

webpack处理JSX

注意：处理JSX利用bable

安装插件：

sudo cnpm i @babel/preset-react

在.babelrc文件中修改代码

{
    "presets": ["@babel/preset-react"],
    "plugins": []
}

webpack处理Vue

安装插件：

sudo cnpm i vue-loader -D

webpack.common.js

webpack5高级配置,webpack,前端,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-554387.html

rules: [
    {
        test: /\.js$/,
        use: ['babel-loader'],
        include: srcPath,
        exclude: /node_modules/
    },
    {
        test: /\.vue$/,
        use: ['vue-loader'],
        include: srcPath,
        exclude: /node_modules/
    }
]

到了这里，关于webpack5高级配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！