Links

基础配置

基础配置

const config = {
// 定义入口
entry: {
app: path.join(__dirname, 'app')
},
// 定义包体文件
output: {
// 输出目录
path: path.join(__dirname, 'build'),
// 输出文件名
filename: '[name].js'
// 使用 hash 作为文件名
// filename: "[name].[chunkhash].js",
},
// 定义如何处理
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
},
// 添加额外插件操作
plugins: [new webpack.DefinePlugin()]
};
Webpack 同样支持添加多个配置:
module.exports = [{
entry: './app.js',
output: ...,
...
}, {
entry: './app.js',
output: ...,
...
}]
我们代码中的 require 与 import 解析规范,则由 resolve 模块负责,其包含了扩展、别名、模块等部分:
const config = {
resolve: {
alias: {
/*...*/
},
extensions: [
/*...*/
],
modules: [
/*...*/
]
}
};

资源加载

const config = {
module: {
rules: [
{
// **Conditions**
test: /\.js$/, // Match files
enforce: 'pre', // "post" too
// **Restrictions**
include: path.join(__dirname, 'app'),
exclude: path => path.match(/node_modules/),
// **Actions**
use: 'babel-loader'
}
]
}
};
// Process foo.png through url-loader and other matches
import 'url-loader!./foo.png';
// Override possible higher level match completely
import '!!url-loader!./bar.png';
babel-loader 或者 awesome-typescript-loader 来处理 JavaScript 或者 TypeScript 文件
/******/ (function(modules) { // webpackBootstrap
...
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ((text = "Hello world") => {
const element = document.createElement("div");
element.innerHTML = text;
return element;
});
/***/ })
/******/ ]);
use: ["style-loader", "css-loader"] css-loader 会自动地解析 @import 与 url(),而 style-loader 则会将 CSS 注入到 DOM 中,并且实现 HMR 的特性,而对于 SASS、LESS 等 CSS 预处理器,也有专门的 sass-loader 或者 less-loader 来处理;在生产环境下,我们也常常会将 CSS 抽取到独立的样式文件中,此时就可以使用 mini-css-extract-plugin (MCEP) 等工具。同样,我们可以使用 url-loader/file-loader 来处理图片等资源文件,