webpack是如何解析模块的

yrfjygb

已于 2022-06-29 13:56:57 修改

阅读量305

点赞数

文章标签： webpack 前端 javascript

于 2022-06-24 14:08:58 首次发布

本文链接：https://blog.csdn.net/yrfjygb/article/details/125444328

版权

webpack是如何解析模块的

在这里插入图片描述
绝对路径：已经是文件的绝对路径，不需要解析，不过项目一般很少这么写。
相对路径：在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录。
模块路径：在 resolve.modules中指定的所有目录检索模块。也可以通过配置别名的方式来替换初始模块路径，具体请参照 resolve.alias 配置选项。
别名路径：在 resolve.alias指定别名对应的文件路径。

模块路径：如果是模块，去当前目录node__modules中查找，如果找到了，是否有package.json文件，如果有，则去找mian/module字段加载文件，没有package.json文件，就去找index.js，如果没有找到，则去上一级目录查找，直到根目录。

别名路径：
（1）路径为文件：如果文件具有扩展名，可以直接加载文件。没有扩展名则将使用 resolve.extensions 选项作为文件扩展名来解析。
（2）路径为文件夹：

有 package.json 文件，则去找mian/module字段加载文件
如果没有package.json，会查找是否有index.js

webpack的css压缩优化

开发环境下，以style的形式来注入css，不开启css压缩
生成环境下，使用CssMinimizerPlugin() ，开启css压缩优化，如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true:

// [...]
module.exports = {
  optimization: {
    // [...]
    minimize: true,
  },
};

CssMinimizerWebpackPlugin插件详情

如何再webpack5中配置process.env.NODE_ENV

脚手架自动配置process.env.NODE_ENV
纯webpack中，
2.1 安装 npm install cross-env -D
2.2 CROSS-ENV (解决不同系统之前的命令兼容问题)
2.3 再package.json 中配置命令，NODE_ENV=development作用设置process.env.NODE_ENV的值为development,NODE_ENV=production 作用设置process.env.NODE_ENV的值为production ,

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack serve --config build/webpack.dev.js --open",
    "build:pro": "cross-env NODE_ENV=production npx webpack --config build/webpack.pro.js"
  },

在这里插入图片描述
在这边打印值 -> // development/production,这样可以区分开发环境和生产环境

如果在业务代码中，需要根据开发环境，动态改变数据请求地址，会更加自动化
所以不仅仅在打包配置中我们需要使用 process.env.NODE_ENV
在其他模块中，仍要使用它，则需要将其全局化
3.1 在webpack.base.js/webpack.config.js中进行全局配置process.env.NODE_ENV，同时要禁用mode模式自动设置process.env.NODE_ENV的值，

 // 插件
    plugins: [
        // 把process.env.NODE_ENV配置成全局变量，可以在项目(组件)中使用，有时候要区分生产环境或开发环境来设置不同的请求地址，因此需要设置为全局变量
        // process.env.NODE_ENV的值是package.json的命令 cross-env NODE_ENV=development中的NODE_ENV=development，process.env.NODE_ENV = (NODE_ENV=development)中development，
        //  cross-env 需要安装npm install cross-env -D  cross-env 解决不同系统之前的命令兼容问题 
        // 
        new webpack.DefinePlugin({
            "process.env.NODE_ENV" : (JSON.stringify(process.env.NODE_ENV))
         }),
        new HtmlWebpackPlugin({
            template: resolve(__dirname, '../index.html')
        }),
    ],
    // 如果使用了 new webpack.DefinePlugin自定义process.env.NODE_ENV变量，则需要关闭mode中自动设置process.env.NODE_ENV，否则会冲突
    optimization: {
    	nodeEnv: false
  	}

如何处理html的img图片？

安装 npm install -D html-loader
{ test: /\.html$/, loader: 'html-loader', options: { esModule: false } }
html-loader默认是以esModule的方式进行编译，而url-loader处理图片的方式是commonjs，所以需要修改一下html-loader的options配置，将esModule改为false