webpack 5 打包实战

in JavaScript with 0 comment

webpack 5 打包实战

近期对以前做的静态网站进行了webpack打包操作，webpack 5 用的时候还是遇到不少问题的，还有一些问题没有解决，以下记录了我使用的loader, plugin,以及最终实现的效果

loader

用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader。

一般的loader使用都需要 安装再引入，loader放在module中，module的作用是告诉webpack如何处理webpack不能够识别的文件，因为webpack是用来打包js的，但一些其它资源比如css/less/sass, 图片，字体，babel-loader等。

loader的特点： 单一原则，一个loader只干一件事情，多个loader会按从右到左，从下往上的顺序执行

比如 ['style-loader', 'css-loader'] 会先执行css-loader解析js中引入的css关系拿到所有内容，再执行style-loader把内容插入到HTML的HEAD代码中

[{loader: 'style-loader'},{loader: 'css-loader}] 这种配置先解析css文件拿到所有内容，再执行style-loader将内容插入HTML的HEAD中

常用的loader分为：

1、 css loader

2、 图片相关loader

3、 引入库文件相关

功能性 Plugin

提升webpack打包性能 Plugin

devServer 配置

devServer: {
        contentBase: "./dist",
        //启用gzip压缩 Response Content-Encoding: gzip
        compress: true,
        open: true,
        port: 9999,
        hot: true,
        hotOnly: true
}

babel-loader 配置

  1. npm install babel-loader babel-core babel-preset-env webpack
  2. npm install --save core-js@3.9.1
  3. dev: npm install --save-dev @babel/plugin-transform-runtime
  4. prod: npm install --save @babel/runtime

DEMO:


const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    target: "web",
    optimization: {
        minimize: true
    },
    mode: "development", // "production" | "development"
    entry: "./src/index.js",
    output: {
        filename: "js/[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        // npm install babel-loader babel-core babel-preset-env webpack
        rules: [
            // 打包JS规则
            {
                test: /\.js$/,
                exclude: /node_modules/, // 告诉webpack不处理哪一个文件夹
                loader: "babel-loader",
                options: {
                    presets: [
                        [
                            //for syntax: 箭头函数，let，const，class， 依赖注入 Decorators 
                            "@babel/preset-env",
                            {
                                // targets: {
                                //     chrome: "58"
                                // },
                                corejs: "3", //npm install --save core-js@3.9.1
                                //useBuiltIns这样就不用手动引入polyfill了
                                useBuiltIns: "usage"
                            }
                        ]
                    ],
                    //for api:  map includes Promise
                    plugins: [
                        [
                            "@babel/plugin-transform-runtime",
                            {
                                absoluteRuntime: false,
                                corejs: 3,//dev: npm install --save-dev @babel/plugin-transform-runtime
                                helpers: true, //prod: npm install --save @babel/runtime
                                regenerator: true,
                                useESModules: false
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
};

本文由 dealdot ＜dealdot＃163.com＞ 创作, Full Stack Developer @ DeepBlue
本文最后编辑时间为: Apr 7, 2021 at 10:55 am
转载请注明来源

评论已关闭.