// 核心概念
// Entry：入口，webpack执行构建的第一步从Entry开始，可以抽象成输入。
// Module：模块，在webpack中一切皆模块，一个模块对应着一个文件，webpack会从配置的Entry开始递归找出所有依赖的模块。
// Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并和分割。
// Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
// Plugin：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
// Output：输出结果，在webpack经过一系列处理并得出最终想要的代码后输出结果。
// ************************************************************************
// webpack会在启动后从Entry里配置的Module开始递归解析Entry依赖的所有Module，
// 每找到一个Module，就会根据配置的loader去找对应的转换规则，对Module进行转换后，
// 再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组，一个Entry和其他所有依赖的Module被分到一个组就是一个Chunk。
// 最后webpack会把所有Chunk转换成文件输出。在整个流程中webpack会在恰当的时机执行Plugin里定义的逻辑。
let path = require("path");
module.exports = {
// webpack在寻找相对路径的文件时会以context为根目录，context默认为执行启动webpack时所在的当前工作目录。如果想改变context的默认配置，如下：
context: path.resolve(__dirname, 'app'), //context默认为执行启动webpack时所在的当前工作目录
// 注意：context必须是一个绝对路径的字符串，除此之外，还可以通过在启动webpack时带上参数webpack --context 来设置context
devtool: "#eval-source-map", //打包方式
// *******************************************************************************************
// entry类型
// 字符串类型,string类型
entry: "./main.js", //入口文件
entry: "./src/main.js",
entry: "./src/index.js",
entry: "./dist/main.js",
entry: "./dist/index.js",
// 数组类型,array类型
entry: ['./app/entry1', './app/entry2'],
// 对象类型,object类型
entry: {
a: './app/entry-a',
b: ['./app/entry-b1', './app/entry-b2']
},
// 配置多个入口，每个入口生成一个Chunk。
// 如果是array类型，则搭配output.library配置项使用时，只有数组里的最后一个入口文件会被导出。
// 配置动态Entry
// 假如项目里有多个页面需要为每个页面的入口配置一个entry，但这些页面数量可能会不断增长，这时entry的配置会受到其他因素的影响导致不能写成静态的值。解决办法就是把entry设置成一个函数去动态返回上面所说的配置：
//同步函数
entry: () => {
return {
a: './pages/a',
b: './pages/b'
}
}
//异步函数
entry: () => {
return new Promise((resolve) => {
resolve({
a: './pages/a',
b: './pages/b'
})
})
}
// ************************************************************************************************************
// Chunk名称
// webpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关：
// 1. 如果entry是一个string或者array，就只会生成一个chunk，这个chunk的名称是main;
// 2. 如果entry是一个object，就可能出现多个chunk，这时chunk的名称是object键值对里键的名称。
// ************************************************************************************************************
output: { //打包路径，出口路径
path: "./dist", //打包文件夹路径
path: __dirname,
path: __dirname,
publicPath: "/dist/", //公共的路径，在每个路径前批量替换
filename: "build.js", //打包文件名
filename: "bundel.js",
filename: 'index.js'
},
resolve: { //查找module的话从这里开始查找。
root: 'D:/webpack-test/src', //包含您的模块的目录（绝对路径）
extensions: ['.js', '.json', '.scss'], //加载模块时可忽略的扩展名
alias: { //模块别名定义
}
},
module: { //module的配置如何处理模块。
//rules: 配置模块的读取和解析规则， 通常用来配置loader， 其类型是一个数组， 数组里每一项都描述了如何去处理部分文件。
// 配置一项rules大致通过以下方式：
// 1. 条件匹配： 通过test、include、exclude三个配置来命中Loader要应用的规则文件。
// 2. 应用规则： 对选中后的文件通过use配置项来应用loader，可以应用一个loader或者按照从后往前的顺序应用一组loader。同时还可以分别给loader传入参数。
// 3. 重置顺序： 一组loader的执行顺序默认是从有道左执行，通过exforce选项可以让其中一个loader的执行顺序放到最前或者是最后。
rules: [
{
test: /\.js$/,
use: ['babel-loader?cacheDirectory'],
include: path.resolve(__dirname, 'src')
},
{
test: [/\.jsx?$/, /\.tsx?$/],
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'test')
],
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'bower_modules')
]
},
{
test: /\.js$/,
use: ['babel-loader'],
parser: {
amd: false, // 禁用 AMD
commonjs: false, // 禁用 CommonJS
system: false, // 禁用 SystemJS
harmony: false, // 禁用 ES6 import/export
requireInclude: false, // 禁用 require.include
requireEnsure: false, // 禁用 require.ensure
requireContext: false, // 禁用 require.context
browserify: false, // 禁用 browserify
requireJs: false, // 禁用 requirejs
}
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: path.resolve(__dirname, 'node_modules')
},
{
test: /\.js$/, //具体的规则
loader: 'babel-loader', //使用的loader，使用的编译插件
exclude: /node_modules/ //不包含，也就是这里的文件夹里的js文件不需要babel编译
//babel-loader: 一个js的编译器，可将 es6+ 转为es5 ，从而在现有的浏览器运行
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
// 也可以写成 loader: 'style!css' 或 loader: [ 'style-loader', 'css-loader' ]
},
{
test: /\.css$/,
loader: 'style!css',
},
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: { name: '[name].[ext]?[hash]'}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[hash:8].[name].[ext]'
}
}
]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
// ******************************************************************************************
plugins: [ //插件:Plugin用于扩展webpack功能，各种各样的Plugin几乎让Webpack可以 做任何构建相关的事情。
// 使用Plugin的难点在于掌握Plugin本身提供的配置项，而不是如何在webpack中接入Plugin。
// 几乎所有webpack无法直接实现的功能都能在社区找到开源的Plugin去解决，需要善于使用搜索引擎去解决。
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
],
// ******************************************************************************************
devServer: {
contentBase: path.join(__dirname, "public"), //你要提供哪里的内容给虚拟服务器用。这里最好填 绝对路径。
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")], //多目录
host: 'localhost', //主机名
port: 8080, //端口号
hot: true, //热模块更新作用
Open: true, //自动打开浏览器
inline: "",
clientLogLevel: 'warning',
historyApiFallback: true, //如果为 true ，页面出错不会弹出 404 页面
compress: true, //如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用
overlay: {
errors：true，
warnings：false //如果为 true ，在浏览器上全屏显示编译的errors或warnings。默认 false （关闭）
//如果你只想看 error ，不想看 warning。
},
quiet: true, //true，则终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的。
},
// *************************************************************************************
// Resolve
// webpack在启动后会从配置的入口模块触发找出所有依赖的模块，
// Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，
// 默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。
resolve: {
// resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。如下：
// 当你通过import Button from 'components/button'导入时，
// 实际上被alias等价替换成import Button from './src/components/button'。
alias: {
componets: './src/components/'
},
// resolve.descriptionFiles配置描述第三方模块的文件名称，也就是package.json文件。默认如下：
descriptionFiles: ['package.json'],
// resolve.modules配置webpack去哪些目录下寻找第三方模块。
// 默认是去node_modules目录下寻找。有时你的项目中会有一些模块大量被其他模块依赖和导入，
// 由于其他模块的位置分布不定，针对不同的文件都要去计算被导入模块文件的相对路径，这个路径有时候会很长，
// 例如：import './../../components/button'，
// 这时你可以利用modules配置项优化，假如那些大量导入的模块都在./src/components目录下：
modules:['./src/components', 'node_modules'],
// 在导入语句没带文件后缀时，webpack会自动带上后缀去尝试访问文件是否存在。
// resolve.extensions用于配置在尝试过程中用到的后缀列表，默认是:
extensions:['.js', '.json'],
// 也就是说当遇到require('./data')这样的导入语句时，webpack会先去寻找./data.js文件，
// 如果找不到则去找./data.json文件，如果还是找不到则会报错。
// webpack会根据mainFields的配置去决定有限采用哪份代码， mainFields默认如下：
mainFields: ['browser', 'main']
}
}
webpack常用配置及说明上篇
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
