Webpack常用插件整理 - 小白专享

记录

日常开发中常用的webpack笔记，持续更新！

常用插件整理

• webpack-merge - 用于合并webpack配置的工具。在开发中，我们通常会有多个webpack配置文件，例如开发环境配置、生产环境配置等。使用webpack-merge可以将这些配置文件合并成一个配置文件，方便管理和维护。同时，webpack-merge还提供了一些方便的合并策略，例在这里插入代码片如覆盖、合并数组等，可以更加灵活地配置webpack。
• webpack-dev-server：提供本地开发服务器，支持热更新。
• webpack-cli - Webpack的命令行接口工具，用于在命令行中运行Webpack构建工具。它提供了一些命令和选项，使得使用Webpack更加方便和灵活。
  • 例如，可以使用webpack-cli来启动开发服务器、打包代码、生成配置文件等操作。
• clean-webpack-plugin：每次打包前清空dist目录，避免旧文件影响新文件。
• html-webpack-plugin：自动生成HTML文件，并将打包后的JS文件自动引入HTML文件中。
• extract-text-webpack-plugin：将CSS文件单独打包，避免JS文件过大。
• copy-webpack-plugin：将静态资源复制到打包后的目录中。
• babel-loader：将ES6+代码转换为ES5代码，使得浏览器兼容性更好。
• style-loader/css-loader：处理CSS文件，使其能够被webpack打包。
• url-loader/file-loader：处理图片、字体等静态资源，使其能够被webpack打包。
• optimize-css-assets-webpack-plugin：压缩CSS文件，减小文件体积。
• uglifyjs-webpack-plugin：压缩JS文件，减小文件体积。

webpack.config.js配置项

webpack.config.js文件是webpack的配置文件，用于指定webpack的各种配置选项。以下是常见的配置选项及其含义：

• entry：指定webpack打包的入口文件路径。
• output：指定webpack打包后的输出文件路径和文件名。
• module：指定webpack处理不同类型文件的loader。
  • 常见的处理loader
    • babel-loader：将ES6/ES7/JSX等代码转换为ES5语法的loader。
    • css-loader：处理CSS文件的loader，支持模块化、压缩、自动添加浏览器前缀等功能。
    • style-loader：将CSS代码注入到HTML页面中的loader。
    • file-loader：处理文件的loader，可以将文件复制到输出目录，并返回文件路径。
    • url-loader：处理图片等文件的loader，可以将小文件转换为base64编码，减少HTTP请求。
    • sass-loader：处理Sass/SCSS文件的loader，将Sass/SCSS代码转换为CSS代码。
    • less-loader：处理Less文件的loader，将Less代码转换为CSS代码。
    • postcss-loader：处理CSS代码的loader，可以使用各种插件对CSS代码进行处理，如自动添加浏览器前缀、压缩等。
    • vue-loader：处理Vue单文件组件的loader，将Vue组件转换为JavaScript代码。
    • ts-loader：处理TypeScript文件的loader，将TypeScript代码转换为JavaScript代码。
• plugins：指定webpack使用的插件。
• resolve：指定webpack解析模块时的规则。
• devServer：指定webpack开发服务器的配置。
• mode：指定webpack的打包模式，可以是development、production或none。
• optimization：指定webpack的优化选项，如代码压缩、代码分离等。
• externals：指定webpack不打包的外部依赖。
• target：指定webpack打包的目标环境，如web、node等。

webpack.config.js简单配置示例

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

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/tpl/index.html'
        })
    ]
};

公众号：搞IT的成龙同学，欢迎一起讨论技术圈琐事！