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,
},
};
如何再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