前言
前面我们写了几篇文章用来介绍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
// }
};
👌,这个配置文件我就不分析太多了,因为我是直接用的之前demo的配置文件,不懂的小伙伴可以看看之前的章节。
安装
首先在demo根目录安装webpack-chain:
npm install -D webpack-chain || yarn add -D webpack-chain
配置
我们在demo根目录创建一个webpack-chain.js的文件,先导出一个config对象:
webpack-chain.js
const Config = require('webpack-chain');
const config = new Config();
module.exports = config.toConfig();
我们new了一个webpack-chain的config对象,然后利用toConfig方法是把webpack-chain的config对象转换成webpack的配置对象的方法。
mode
可以看到,当我们用mode方法的时候,IDE直接提示我们value的值有哪些了,是不是很方便呢?
ok! 我们这里用的是“development”,所以我们直接设置mode的值为“development”(小伙伴可以像我一样,用ide分两屏一左一右对照的来写一遍)。
const Config = require('webpack-chain');
const config = new Config();
config
.mode("development")
module.exports = config.toConfig();
context
可以看到,ide提示我们输出一个string字符串:
const Config = require('webpack-chain');
const config = new Config();
const path = require("path");
config
.mode("development")
.context(path.resolve(__dirname, "./src"))
module.exports = config.toConfig();
Ok! 后面的内容我就不截图了,直接按照提示配置就ok,我就加快节奏了哈~
entry
const Config = require('webpack-chain');
const config = new Config();