荐 webpack源码解析六(webpack-chain)
程序员文章站
2022-03-30 10:58:16
前言前面我们写了几篇文章用来介绍webpack源码,跟着官网结合demo把整个webpack配置撸了一遍:webpack源码解析一webpack源码解析二(html-webpack-plugin插件)webpack源码解析三webpack源码解析四webpack源码解析五今天我们说一下一个关于webpack配置的第三方库webpack-chain,为什么要讲它呢? 可以借助IDE可以做到智能提示,让我们配置起来不容易出错,而且完全链式语法,用起来比较爽!开始我们还是接着我们之前章节的w...
前言
前面我们写了几篇文章用来介绍webpack源码,跟着官网结合demo把整个webpack配置撸了一遍:
今天我们说一下一个关于webpack配置的第三方库webpack-chain,为什么要讲它呢? 可以借助IDE可以做到智能提示,让我们配置起来不容易出错,而且完全链式语法,用起来比较爽!
开始
我们还是接着我们之前章节的webpack-demo继续,webpack-chain的api用法大家可以简单的先过一下官网,然后看一下我们之前webpack-demo的配置文件,
webpack.config.js:
const path = require("path");
module.exports = {
mode: "development",
context: path.resolve(__dirname, "./src"),
// entry: ["babel-polyfill","./index.js"],
entry: {
app: ["./index.js"]
},
output: {
path: path.join(process.cwd(), "lib"), //默认为path.join(process.cwd(), "dist")
pathinfo: true,
filename: "[name].[contenthash:16].[fullhash:16].[id].js",
chunkFilename: "[id].js",
// library: "demoSay",
// libraryExport: "default",
// libraryTarget: "jsonp",
},
experiments: {
// outputModule: true
},
module: {
noParse: /babel-polyfill/,
rules: [
{
test: /.vue$/,
use: 'vue-loader',
},
{
test: /\.(sass|scss)$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
config: {
path: path.resolve(__dirname, "./postcss.config.js")
}
}
},
"sass-loader"
],
},
{
test: /\.png$/,
oneOf: [
{
resourceQuery: /inline/,
loader: "url-loader",
options: {
limit: 1024 * 1024 * 10
}
},
{
resourceQuery: /external/,
loader: "file-loader",
}
]
}
]
},
resolve: {
alias: {
DemoVue: path.resolve(__dirname, "./src/demo-vue.vue")
},
extensions: ['.wasm', '.mjs', '.js', '.json', '.vue'],
modules: [path.resolve(__dirname, "src"), "node_modules"],
unsafeCache: /demo-publicpath/,
},
plugins: [
new (require("vue-loader-plugin"))(),
// new (require("uglifyjs-webpack-plugin"))({
// test: /\.js($|\?)/i
// })
],
devServer: {
before(app, server, compiler) {
app.get("/login",(req,res,next)=>{
req.query.name="hello "+req.query.name;
next();
});
},
after(app, server, compiler) {
app.get("/login",(req,res,next)=>{
res.json({msg: req.query.name});
});
},
clientLogLevel: "info",
allowedHosts: [
"localhost"
],
contentBase: path.join(process.cwd(), "lib"),
// contentBasePublicPath: "/assets",
filename: /app\.js/,
headers: {
'X-Custom-Foo': 'bar'
},
historyApiFallback: true,
host: "0.0.0.0",
port: "8090",
hot: true,
liveReload: true,
open: true,
useLocalIp: true,
overlay: true,
},
// performance: {
// hints: "error",
// maxEntrypointSize: 1024
// }
};
上一篇: HTML初学者必看
下一篇: MySQL完整性约束的定义与实例教程
推荐阅读
-
SpringBoot 源码解析 (六)----- Spring Boot的核心能力 - 内置Servlet容器源码分析(Tomcat)
-
Mybaits 源码解析 (六)----- 全网最详细:Select 语句的执行过程分析(上篇)(Mapper方法是如何调用到XML中的SQL的?)
-
荐 【dubbo源码解析】--- dubbo的服务暴露+服务消费(RPC调用)底层原理深入探析
-
Spring源码学习【六】AOP原理解析(一)代理对象的生成
-
Spring源码解析六 (Bean的初始化)
-
荐 webpack源码解析六(webpack-chain)
-
Redis6.0.8源码解析六之执行set指令时,做了啥?
-
荐 超级详细的koa源码解析(看完不会我打你)
-
荐 HashMap代码解析-4.4源码内部HashMap.java
-
SpringBoot 源码解析 (六)----- Spring Boot的核心能力 - 内置Servlet容器源码分析(Tomcat)