Webpack学习小结（一）

最新推荐文章于 2024-10-14 08:34:05 发布

顾北丿丶清歌寒

最新推荐文章于 2024-10-14 08:34:05 发布

阅读量227

点赞数 2

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/GB_qgh/article/details/115605716

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Webpack学习周结：

前言

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具 。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle 。

项目基本架构

在这里插入图片描述
这是最基础的打包架构，其中：

一个输入文件夹(src): 需要打包的文件夹；
一个输出文件夹(build): 打包后生成的文件夹；
(ps: 文件夹名称可以修改替换)

一个配置文件(webpack.config.js): 内含打包的所有你预定的配置都在里面完成，这也是接下来总结的重点文件。

开发环境配置（webpack.config.js）

五大部分

1. 入口（entry）

入口起点 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack.config.js中配置 entry 属性，来指定一个（或多个）不同的入口起点。

module.exports = {
    entry:'./src/js/index.js',
}

2. 出口（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

const path = require('path');

module.exports = {
  entry:'./src/js/index.js',

  output: {
        filename: "js/built.js",
        path: path.resolve(__dirname, 'build')
    }
};

其中 path 文件是调用其中的 resolve方法，返回文件的绝对路径。

3. 模块（module）

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

module.exports = {
  module: {
	rules: [
            {
                //处理css文件
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    /** 
                     * css兼容性处理
                     */
                    // {
                    //     loader: 'postcss-loader',
                    //     options: {
                    //         ident: 'postcss',
                    //         plugins: () => [
                    //             require('postcss-preset-env')()
                    //         ]
                    //     }
                    // }
                ]
            },
            /**
             * 1. 语法检查: eslint-loader eslint
             *  注意: 只检查自己写的源代码，第三方的库是不用检查的
             *  设置检查规则:
             *      package.json中的eslintConfig中设置~
             *       "eslintConfig": {
             *        "extends": "airbnb-base"
             *       }
             *       airbnb --> eslint-config-airbnb-base   eslint-plugin-import    eslint
             */
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     loader: 'eslint-loader',
            //     options: {
            //         //自动修复eslint的错误
            //         fix: true,
            //     }
            // },
            /**
             * 2. js兼容性处理: babel-loader @babel/core
             * (1) 基本js兼容性处理 --> @babel/preset-env
             *  问题: 只能转换基本语法，如promise高级语法不能转换
             *
             * (2) 全部js兼容性处理 --> @babel/polyfill
             *  用法: 不需用配置，只需要在js文件中引用即可
             *  问题: 我只要解决部分兼容性问题，但是将所有兼容性代码全部引用，体积太大了
             *
             * (3) 需要做兼容性处理的就做: 按需加载 --> core-js
             */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //预设: 知识babel做怎么样的兼容性处理
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                //按需加载
                                useBuiltIns: 'usage',
                                //指定core-js版本
                                corejs: {
                                    version: 3
                                },
                                //指定兼容性做到哪个版本浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },
            {
                //处理html文件
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                //处理图片
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    esModule: false
                }
            },
            {
                //处理其他资源
                exclude: /\.(html|js|css|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
}

4. 插件（plugins）

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require()它，然后把它添加到 plugins数组中。多数插件可以通过 选项(options) 自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new操作符来创建一个插件实例。

/**
 * 1. html-webpack-plugin: 处理html文件中的图片打包问题,生成一个html新模板,其中会调用打包好的css与js;
 * 2. mini-css-extract-plugin: 提取css为单独文件(将整个文件下的css打包成一个大的css供打包好的html调用);
 * 3. optimize-css-assets-webpack-plugin: 压缩css;
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
	plugins: [
	        new HtmlWebpackPlugin({
	            template: './src/html/index.html'
	        }),
	        new MiniCssExtractPlugin({
	            filename: 'css/built.css'
	        }),
	        new OptimizeCssAssetsWebpackPlugin()
	]
}

5. 模式（mode）

module.exports = {
    mode:'development',//'production'
}

模式分为两种：一种为开发者模式（development）,一种为生产者模式（production）

选项	描述
development	会将 `DefinePlugin`中 `process.env.NODE_ENV`的值设置为`development`. 为模块和 chunk 启用有效的名。
production	会将 `DefinePlugin`中 `process.env.NODE_ENV`的值设置为 `production`。为模块和 chunk 启用确定性的混淆名称，`FlagDependencyUsagePlugin`，`FlagIncludedChunksPlugin`，`ModuleConcatenationPlugin`，`NoEmitOnErrorsPlugin`和 `TerserPlugin`。
none	不使用任何默认优化选项