配置文件
简单配置
本地安装
$ npm i webpack -D基本配置
新建webpack.config.js 文件
const path = require('path');
module.exports = {
// JavaScript 执行入口文件
entry: './entry.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
}
};运行命令
$ webpack --mode=development编译打包
重新编译打包，刷新页面，就可以看到更改的样式。
--progress是可以显示打包进度的$ webpack --progress --mode=development
配置命令
在package.js里面进行命令配置
// ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": " webpack --mode=development"
},
// ...之后，每次使用在控制台输出npm run start 就可以。
定义规则
rules
rules是一个数组，是由多个规则组成的。是一条模块加载时的规则链。
module: {
rules: [
{
//规则1
},
{
//规则2
}
]
}每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)。
条件(condition)
条件，就是满足条件，就走这个规则，对规则的过滤条件。
最常用的条件输入是由以下四个属性共同作用的。
test
include
exclude
resource
01. test
一般是提供一个正则的数组。
02. include
一般是一个字符串/字符串的数组。
表示目录中的哪些文件需要这个规则。
使用绝对路径数组。
03. exclude
一般是一个字符串/字符串的数组。
使用绝对路径数组。
尽量避免 exclude，更倾向于使用 include
表示目录中的哪些文件不需要这个规则，与
include是正好相反的。也就是过滤掉一些文件，最常用的是过滤掉
node_modules中的一些文件。
e.g.
module: {
rules: [
{
test: /\.vue$/,
use: [{
loader: "vue-loader"
}],
include: [
path.resolve(__dirname, "app")
]
},
{
test: /\.js$/,
use: [{
loader: "babel-loader"
}],
exclude: [/node_modules/]
}
]
}04. resource
匹配的是绝对路径。
只可以匹配一个文件。
和上面的test, include, exclude这三个属性相排斥，使用此属性，test, include, exclude都不会生效。
e.g.
{
resource: '/path/to/style.css'
}issuer 也是用来限制条件的，不怎么用。其概念为：被请求资源(requested the resource)的模块文件的绝对路径。是导入时的位置。
格式： issuer 条件（导入源） issuer: { test, include, exclude }
结果(result)
符合条件的模块/文件怎么打包加载，一般一个规则的结果就是一个loader。
01. use
use可以指定要用的loader（是一个对象数组，这个对象是UseEntry），一般一个rule至少有一个loader。
e.g.
{
test: /\.vue$/,
use: [{
loader: "vue-loader"
}],
include: [
path.resolve(__dirname, "app")
]
}02. UseEntry
必须有一个
loader属性是字符串有一个
options属性为字符串/对象e.g.
{ test: /\.css/, use: [{ loader: "css-loader" options: { modules: true } }], }
use: [ { loader } ]可以简写为loader，没有别的option属性，就可以使用采用简写e.g.
use: [ { loader: “style-loader “} ]可以简写为use: [ “style-loader” ]
03. parser
parser解析选项对象，用来禁用一些解析器，默认的解析器有以下这些
parser: {
amd: false, // 禁用 AMD
commonjs: false, // 禁用 CommonJS
system: false, // 禁用 SystemJS
harmony: false, // 禁用 ES2015 Harmony import/export
requireInclude: false, // 禁用 require.include
requireEnsure: false, // 禁用 require.ensure
requireContext: false, // 禁用 require.context
browserify: false, // 禁用特殊处理的 browserify bundle
requireJs: false, // 禁用 requirejs.*
node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main 等。
node: {...} // 在模块级别(module level)上重新配置 node 层(layer)
}嵌套规则(nested rule)
oneOf
规则数组，只使用这些嵌套规则之一
{ oneOf: [ /* rules */ ] }rules
规则数组，使用所有这些嵌套规则（合并可用条件）
{ rules: [ /* rules */ ] }resource
请求文件的绝对路径。已经根据 resolve 规则解析。
01.resource
当使用多个条件时，所有条件都匹配，默认是数组。
{ resource: [ /* rules */ ] }02. resource or
任意条件匹配时匹配
{ resource: { or: [ /* rules */ ] } }03. resource and
仅当所有条件都匹配时才匹配
{ resource: { and: [ /* rules */ ] } }04. resource not
条件不匹配时匹配
{ resource: { not: /* rules */ } }Last updated