webpack配置-resolve常用配置
比较上一篇博客的webpack.config.js文件仅更新了resolve对象;webpack配置-loader配置详情-module配置详情.
const { resolve } = require("path");// 路径处理
const htmlWebpackPligins = require("html-webpack-plugin");// html模板
const { CleanWebpackPlugin } = require("clean-webpack-plugin")// 清空上次打包内容
/*
entry: 入口起点
1.string --> "./src/main.js" -- 单入口
打包形成一个chunk。输出一个bundle文件。
chunk默认的名称是 main
2.array --> ["./src/add.js", "./src/main.js"] -- 多入口 (用途-html不能热更新,引入html文件让HMR功能生效)
打包形成一个chunk。输出一个bundle文件。
chunk默认的名称是 main
3.object --> { main: "./src/main.js", add: "./src/add.js", } -- 多入口
引入几个文件就生成几个chunk,同样输出同等数量的bundle文件
此时chunk的名称为key值
4.object[Array] --> { main: ["./src/main.js"], option: ["./src/add.js", "./src/count.js"], } -- 多入口
一个{key:value}为一个chunk,输出一个bundle文件
此时chunk的名称为key值
*/
module.exports = {
// entry: "./src/main.js",
// entry: ["./src/main.js", "./src/add.js"],
// entry: { main: "./src/main.js", add: "./src/add.js", },
entry: { main: ["./src/js/main.js"] },// 推荐(可以将多个包打包成一个chunk,又提高了可维护性)
output: {
// 文件输出名称(指定名称+目录)
// js/ 会将对应的js文件输出到js文件夹下
filename: "js/[name].[hash:8].js",// [name] -- entry中相应的key; [hash:8] -- 生成8位哈希值; 例: main.dff06b57.js
// 打包后文件输出位置(将来所有资源输出的目录)
path: resolve(__dirname, "dist"),
// 所有资源引入的公共路径 ==> ./image/image.jpg (./为公共路径)
publicPath: "./",
/*
入口chunk:
entry 中定义的入口文件为入口chunk
非入口chunk:(异步引入的文件)(懒加载的文件)
非 entry 中定义的文件为非入口chunk
*/
chunkFilename: "js/[name]_chunk.js", // 非入口chunk名称
/* 抛出一个全局变量(整个库内) 在main文件中体现为 var main = 一个匿名函数 */
/* 使用场景: 使用如dll技术,单独打包出一个包时 */
library: "[name]",
/* 不再使用 var 来定义变量,而是添加到 window(浏览器中) 对象中 */
libraryTarget: "window",
// libraryTarget: "global",// 或者 global(nodeJS中)
// libraryTarget: "commonjs", // 将使用 commonjs 方式引入它
},
/* loader */
module: {
rules: [
/* loader配置 */
{
test: /\.css$/,
/* 多个loader配置使用use */
use: ["style-loader", "css-loader"]
},
// {
// test: /\.js$/,
// exclude: /node_modules/,// 排除node_modules文件夹中的文件
// include: resolve(__dirname, "src"),// 只检查src目录下的文件
// /* 优先执行(会优先执行添加此属性的loader) */
// enforce: "pre",
// /* 延后执行 */
// // enforce: "post",
// /* 单个loader使用loader */
// loader: "eslint-loader",
// },
// {
// /* 以下配置的相同的loader只会生效一个 */
// oneOf: [],
// }
]
},
plugins: [
new htmlWebpackPligins(),// 使用生成html模板的插件
new CleanWebpackPlugin(),// 使用打包后删除上一次打包文件的插件
],
mode: "development", // 打包模式 development 开发模式(可读性高,代码体积大) | production 生产模式(可读性差,代码体积小)
/* 模块解析规则 */
resolve: {
/* 配置路径别名,优点:简写路径;缺点:没有提示 */
alias: {
$css: resolve(__dirname, "src/css")
},
/* 配置省略文件后缀名 */
extensions: [".js", ".json", ".css", "jsx"],
/* 告诉 webpack 解析模块去哪个目录找 */
modules: [resolve(__dirname, "../../node_modules"), "node_modules"]
}
}