8.webpack基本使用

未禾

已于 2024-01-26 16:59:32 修改

阅读量626

点赞数

分类专栏： Vue 文章标签： node.js webpack vue.js

于 2021-05-16 20:46:11 首次发布

本文链接：https://blog.csdn.net/qq_45305209/article/details/116902405

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

webpack.config.js打包语法

斜杠“/”含义
配置中“/”代表url根路径
例如：http://localhost:8080/dist/js/test.js中的http://localhost:8080/

node中的路径

属性	描述
__dirname	返回被执行的js所在文件夹的绝对路径
__filename	返回被执行的js的绝对路径
process.cwd()	返回运行node命令时所在的文件夹的绝对路径

1.上下文（context）

入口（entry）文件所处的目录的绝对路径的字符串
语法：context : string

基础目录，绝对路径，用于从配置中解析入口点（entry point）和加载器（loader）

const path = require('path');

module.exports = {
	// ...
	context: path.resolve(__dirname, 'app')
};

默认使用当前目录，但是推荐在配置中传入一个值。这使得配置独立于CWD（current working directory，当前工作目录）

2.入口（entry）

入口起点（entry point），指示webpack应该使用哪个模块，来作为构建其内部依赖图（dependency graph）的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的
默认值：“./src/index.js”，但可以通过在webpack configuration中配置entry属性，来指定一个（或多个）不同的入口起点
entry配置是必填的，若不填则将导致webpack报错退出

配置模块的入口，可抽象成输入，webpack执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块

简单规则：每个HTML页面都有一个入口起点
单页应用（SPA）：一个入口起点
多页应用（MPA）：多个入口起点

什么是Chunk？

Chunk是代码块的意思，webpack在执行构建的时候，会把多个模块合并为一个文件，该文件就称为Chunk
webpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关：
（1）如果entry是一个string或array，就只会生成一个Chunk，这时Chunk的名称是main
（2）如果entry是一个object，就可能会出现多个Chunk，这时Chunk的名称是object键值对里键的名称

Entry参数类型

Entry类型可以是以下三种中的一种或者相互组合
语法：entry : string | array | object

类型	例子	含义
string	‘./app/entry’	入口模块的文件路径，可以是相对路径
array	[‘./app/entry1’, ‘./app/entry2’]	入口模块的文件路径，可以是相对路径
object	{ a: ‘./app/entry-a’, b: [‘./app/entry-b1’, ‘./app/entry-b2’]}	配置多个入口，每个入口生成一个Chunk
如果是array类型，则搭配output.library配置项使用时，只有数组里的最后一个入口文件的模块会被导出

（1）entry属性的单个入口语法

①：新建一个项目，目录结构如下图

|-- src
|   | -- common.js
|   | -- index.html
|   | -- main.js
| -- webpack.config.js

②：配置webpack的配置文件（webpack.config.js）

语法：entry: string | [string]

// 1.从node环境中导入path模块
const path = require('path');

// 2.声明导出一个对象
module.exports = {
	// 3.JavaScript执行入口文件
	方式①：entry: './src/main.js',
	方式②：entry: {
		main: './src/main.js'
	},
	output: {
		// 4.输出bundle.js文件都放到dist目录下
		path: path.resolve(__dirname, './dist'),
	}
};

③：配置webpack打包入口文件（main.js）

// 1.通过CommonJS规范导入showHelloWorld函数
const showHelloWorld = require('./common.js');
// 2.执行showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');

common.js => 项目存放公共代码文件

function showHelloWorld(content) {
	alert('hello world')
}

// 通过CommonJS规范导出showHelloWorld函数
module.exports = showHelloWorld;

④：项目的首页（index.html）使用./dist/main.js

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
	<div id="app"></div>
</body>

<!-- 导入webpack输出的JavaScript文件 -->
<script src="../dist/main.js"></script>

</html>

⑤：执行webpack命令打包

打包后输出的目录结构（多出了一个main.js文件）

| -- dist
|   | -- main.js
| -- src
|   | -- common.js
|   | -- index.html
|   | -- main.js
| -- webpack.config.js

注意：
webpack3执行webpack命令后打包出来的main.js文件是没有压缩的；
webpack4执行webpack命令打包出来的main.js文件是压缩过，想打包后的文件没压缩可执行下面命令：

命令	描述
webpack --mode development	打包后没压缩
webpack --mode production	打包后压缩
webpack	打包后压缩

（2）数组语法

也可以将一个文件路径数组传递给entry属性，这将创建一个所谓的多主入口（multi-main entry）。在想要一次注入多个依赖文件，并且将它们的依赖引导（dependency graph）到一个块（chunk）时，这种方式就很有用

webpack.config.js

module.exports = {
	entry: [ // 入口
		'./src/main_1.js',
		'./src/main_2.js'
	],
	output: {
		filename: 'bundle.js'
	}
}

当希望通过一个入口（例如一个库）为应用程序或工具快速设置webpack配置时，单一入口的语法方式是不错的选择。然而，使用这种语法方式来扩展或调整配置的灵活性不大

①：新建一个项目，目录结构如下图

|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   |-- show.js
| -- webpack.config.js

②：配置webpack的配置文件（webpack.config.js）

const path = require('path');

module.exports = {
	// JavaScript 执行入口文件
	entry: ['./src/main.js', './src/show.js'],
	output: {
		// 输出 bundle.js 文件都放到dist目录下
		path: path.resolve(__dirname, './dist'),
	}
};

③：配置webpack打包入口文件（main.js），2个

第一个：main.js

// 1.通过CommonJS规范导入showHelloWorld函数
const showHelloWorld = require('./common.js');
// 2.执行showHelloWorld函数
showHelloWorld('Webpack的安装和使用');

common.js => 项目存放公共代码文件

function showHelloWorld(content) {
	alert('hello world')
}

// 通过CommonJS规范导出showHelloWorld函数
module.exports = showHelloWorld;

第二个：show.js

alert("is show.js")

④：项目首页使用（index.html）使用打包后文件

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
	<div id="app"></div>
</body>
<!-- 导入webpack输出的JavaScript文件 -->
<script src="../dist/main.js"></script>
</html>

⑤：执行webpack打包命令

执行webpack --mode development命令打包后输出的目录结构（多出了一个main.js 文件）

|-- dist
|   | -- main.js
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   | -- myjQuery.js
| -- webpack.config.js

查看源码*：可以发现从打包后里抽取的核心代码，其中代码执行的顺序上面标有序号。其中entry配置为数组和字符串的区别就是第4步加载的入口个数。如果是数组，将会有多个加载的入口，如果为字符串将会只有一个加载的入口
注意：webpack3以前modules接收的参数是数组；webpack4中的modules接收的参数是对象

（3）对象语法

如果传入一个对象，对象的属性的值可以是一个字符串、字符串数组或者一个描述符（descriptor）
描述符语法可以用来传入额外的选项给入口

webpack配置的可扩展：指这些配置可以重复使用，并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点从环境（environment）、构建目标（build target）、运行时（runtime）中分离。然后使用专门的工具（如webpack-merge）将它们合并起来
当通过插件生成入口时，可以传递空对象{}给entry

webpack.config.js
语法：entry: { string | [string] } | {}

module.exports = {
	entry: {
		app: './src/app.js',
		adminApp: './src/adminApp.js'
	}
};

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式

①：新建一个项目，目录结构如下图

|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   |-- show.js
| -- webpack.config.js

②：配置webpack配置文件（webpack.config.js）

const path = require('path');

module.exports = {
	// home是指定第一个入口代码块的名称（打包输出的文件默认以这个命名）
	// about是指定第二个入口代码块的名称（打包输出的文件默认以这个命名）
	entry: {
		home:'./src/main.js',
		about:'./src/show.js'
	},
	output: {
		path: path.resolve(__dirname, './dist'),
	}
};

其它文件的内容和上面保持不变

③：执行webpack打包命令

执行webpack --mode development命令打包后输出的目录结构（多出了about.js和home.js文件）

|-- dist
|   |-- about.js
|   |-- home.js
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   |-- myjQuery.js
|-- webpack.config.js

自定义文件输出名

默认情况下，入口chunk的输出文件名是从output.filename中提取出来的，但可以为特定的入口指定一个自定义的输出文件名

module.exports = {
	//...
	entry: {
		app: './app.js',
		home: { import: './contact.js', filename: 'pages/[name][ext]' },
		about: { import: './about.js', filename: 'pages/[name][ext]' }
	}
};

描述符语法在这里被用来将filename—选项传递给指定的入口点

app这个chunk就不会包含react-vendors拥有的模块了。也可以使用数组为一个入口指定多个文件：

module.exports = {
	//...
	entry: {
		app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
		'react-vendors': ['react', 'react-dom', 'prop-types']
	}
};

Entry接收函数类型（动态）

entry也可以接收一个函数，好处是在函数里面可以通过for循环可以产生：多个页面多个入口

const path = require('path');

module.exports = {
	// JavaScript 执行入口文件(entry是一个函数)
	entry: () => {
		// 好处是这里面通过for循环可以产生：多个页面多个入口
		return {
			main:'./src/main.js'
		}
	},
	output: {
		path: path.resolve(__dirname, './dist'),
	}
};

常用场景

（1）分离app（应用程序）和vendor（第三方库）入口

①：webpack.config.js
webpack配置2个单独的入口点

module.exports = {
	entry: {
		main: './src/app.js',
		vendor: './src/vendor.js'
	}
};

为什么要配置两个入口？
这样就可以在vendor.js（入口）中存入未做修改的必要库或文件（例如Bootstrap、jQuery、图片等），然后将它们打包在一起成为单独的块。内容哈希保持不变，这使浏览器可以独立地缓存它们，从而减少了加载时间

在webpack <4的版本中，通常将vendor作为一个单独的入口起点添加到entry选项中，以将其编译为一个单独的文件（与CommonsChunkPlugin结合使用）
而在webpack 4后中不鼓励这样做。使用optimization.splitChunks选项，将vendor和app（应用程序）模块分开，并创建一个单独的文件。不要为vendor或其他不是执行起点创建entry

②：webpack.prod.js

module.exports = {
	output: {
		filename: '[name].[contentHash].bundle.js'
	}
};

③：webpack.dev.js

module.exports = {
	output: {
		filename: '[name].bundle.js'
	}
};

（2）多页面应用程序

webpack.config.js
告诉webpack需要三个独立分离的入口

module.exports = {
	entry: {
		pageOne: './src/pageOne/index.js',
		pageTwo: './src/pageTwo/index.js',
		pageThree: './src/pageThree/index.js'
	}
};

为什么使用多页面？
在多页面应用程序中，服务器会拉取一个新的HTML文档给客户端。页面重新加载此新文档，并且资源被重新下载。然而，这给了特殊的机会去做很多事，例如：使用optimization.splitChunks为页面间共享的应用程序代码捆绑。由于入口起点数量的增加，多页应用能够复制多个入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益
根据经验：每个HTML文档只使用一个入口起点

3.输出（output）

output属性告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件。主要输出文件的默认值是“./dist/main.js”，其他生成文件默认放置在./dist文件夹中。通过在配置中指定一个output选项，配置webpack如何向硬盘写入编译文件
注意：即使可以存在多个entry入口，但只能指定一个output配置

（1）单入口

在webpack配置中，output属性的最低要求是，将它的值设置为一个对象，然后为将输出文件的文件名配置为一个output.filename

webpack.config.js

const path = require('path');

// 此配置将一个单独的first-bundle.js文件输出到dist目录中
module.exports = {
	entry: './entry/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'first-bundle.js'
	}
}

通过output.filename和output.path属性，来告诉webpack bundle的名称，以及想要bundle生成（emit）到哪里。path模块是一个Node.js核心模块，用于操作文件路径

（2）多入口

如果配置中创建出多于一个“chunk”（例如，使用多个入口起点或使用像CommonsChunkPlugin这样的插件），则应该使用占位符（替代）来确保每个文件具有唯一的名称

// 输出文件写入到硬盘：./dist/app.js, ./dist/search.js
module.exports = {
	entry: {
		app: './src/app.js',
		search: './src/search.js'
	},
	output: {
		filename: '[name].js',
		path: __dirname + '/dist'
	}
}

（3）高级进阶

以下是对资源使用CDN和hash的复杂示例：

webpack.config.js

module.exports = {
	output: {
		path: '/home/proj/cdn/assets/[fullhash]',
		publicPath: 'https://cdn.example.com/assets/[fullhash]/'
	}
};

如果在编译时，不知道最终输出文件的publicPath是什么地址，则可以将其留空，并且在运行时通过入口（main.js）文件中的“_webpack_public_path_”动态设置

main.js/index.js

__webpack_public_path__ = myRuntimePublicPath;
// 应用程序入口的其余部分....

output选项指定webpack输出的位置，其中比较重要的也是经常用到的有path和publicPath

选项	默认	说明
output.path	process.cwd()	指示输出的目录，对应一个绝对路径，例如在项目中通常会做如下配置
output.publicPath	空字符串	为项目中的所有资源指定一个基础路径，被称为公共路径（publicPath）

output.publicPath：当打包的时候，webpack会在静态文件路径前面添加publicPath的值

静态文件：static下的原封不动打包的文件。所有资源的基础路径是指项目中引用css、js、img等资源时候的一个基础路径，这个基础路径要配合具体资源中指定的路径使用

打包后资源的访问路径可以用如下公式表示：
静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径

配置output.publicPath（下面三个都使用这个配置）

output.publicPath = '/dist/'

①：image图片

options: {
	name: 'img/[name].[ext]?[hash]'
}
// 最终图片的访问路径:
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'

②：js脚本

output: {
	filename: '[name].js'
}
// 最终js的访问路径:
output.publicPath + '[name].js' = '/dist/[name].js'

③：extract-text-webpack-plugin插件css

new ExtractTextPlugin({
	filename: 'style.[chunkhash].css'
})
// 最终css的访问路径:
output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css

这个最终静态资源访问路径在使用html-webpack-plugin打包后得到的html中可以看到。所以publicPath设置成相对路径后，相对路径是相对于build之后的index.html的

例如：如果设置output.publicPath: ‘./dist/’，则打包后js的引用路径为./dist/main.js，但是这里有一个问题，相对路径在访问本地时可以，但是如果将静态资源托管到CDN上则访问路径显然不能使用相对路径，但是如果将output.publicPath设置成/，则打包后访问路径为localhost:8080/dist/main.js，本地无法访问
一般情况下publicPath应该以“/”结尾，而其他loader或插件的配置不要以“/”开头

4.装载（loader，转换器）

用于转换某些类型的模块，是一个转换器
loader可以使在“import”或“load（加载）”模块时预文件。因此，loader装载了其他组装工具中的“任务（task）”，并提供了处理前端可以将文件从不同的语言（如TypeScript）转换为JavaScript或将内联图像转换为数据URL。loader甚至允许直接在JavaScript模块中importCSS文件

loader特性

（1）loader支持链式调用
链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。

（4）loader可以是同步的，也可以是异步的
（5）loader运行在Node.js中，并且能够执行任何操作
（6）loader可以通过options对象配置（仍然支持使用query参数来设置选项，但是这种方式已被废弃）
（7）除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
（8）插件（plugin）可以为 loader 带来更多特性
（9）loader能够产生额外的任意文件
可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑；例如：压缩、打包、语言翻译和更多其他特性

解析loader

loader遵循标准模块解析规则。多数情况下，loader将从“模块路径”加载（通常是从npm install,，node_modules进行加载）

预期loader模块导出为一个函数，并且编写为Node.js兼容的JavaScript。通常使用npm进行管理loader，但是也可以将应用程序中的文件作为自定义loader。按照约定，loader通常被命名为 xxx-loader（例如 json-loader）

loader基本使用

（1）安装相应的loader

可以使用loader告诉webpack加载CSS文件，或者将TypeScript转为JavaScript。从而，首先安装相对应的loader：

npm install --save-dev css-loader ts-loader
yarn add --save-dev css-loader ts-loader

（2）配置webpack.config.js

然后指示webpack对每个.css使用css-loader，以及对所有.ts文件使用ts-loader：

webpack.config.js

module.exports = {
	module: {
		rules: [
			{ test: /\\.css$/, use: 'css-loader' },
			{ test: /\\.ts$/, use: 'ts-loader' }
		]
	}
};

装载机使用方式（loader，三种）

（1）配置方式（推荐）：在webpack.config.js文件中指定loader

module.rules允许在webpack中配置多个指定的loader。这种方式是展示loader的一种简明方式，并且有助于使代码变得简洁和易于维护。同时可以对各个loader有个局部概览：

loader从右到左（或从下到上）地取值（评估）/执行（执行）。在下面的示例中，从sass-loader开始执行，然后继续执行css-loader，最后以style-loader为结束

module.exports = {
	module: {
		rules: [
			{
				test: /\\.css$/,
				use: [
					// [style-loader](/loaders/style-loader)
					{ loader: 'style-loader' },
					// [css-loader](/loaders/css-loader)
					{
						loader: 'css-loader',
						options: {
							modules: true
						}
					},
					// [sass-loader](/loaders/sass-loader)
					{ loader: 'sass-loader' }
				]
			}
		]
	}
};

（2）内联方式：在每个import语句中显式指定loader

可以在import语句或任何与“import”方法同等的引用方式中指定loader。使用“!”将资源中的loader分开。每个部分都会相对于当前目录解析

import Styles from 'style-loader!css-loader?modules!./styles.css';

通过为内联import语句添加预设，可以覆盖配置中的所有loader、preLoader和postLoader：
①使用“!”临时，将替代所有已配置的normal loader（普通loader）

import Styles from '!style-loader!css-loader?modules!./styles.css';

②使用“!!”预先，将所有所有已配置的loader（preLoader、loader、postLoader）

import Styles from '!!style-loader!css-loader?modules!./styles.css';

③使用“-!”临时，将替代所有已配置的preLoader和loader，但是不替换postLoader

import Styles from '-!style-loader!css-loader?modules!./styles.css';

选项可以传递查询参数
例如：?key=value&foo=bar，或者一个JSON对象
例如：?{“key”:“value”,“foo”:“bar”}。

尽快使用module.rules，因为这样可以减少原始码中样板文件的代码量，并且可以在错误时，重启地调试和定位loader中的问题

（3）CLI方式：在shell命令中指定它们

webpack --module-bind pug-loader --module-bind 'css=style-loader!css-loader'

这会对.jade文件使用pug-loader，以及对.css文件使用style-loader和css-loader

5.插件（plugin，扩展器）

plugin是对webpack的本身的扩展，是一个扩展器

插件是webpack的“支柱”功能。webpack自身也是构建在webpack配置中用到的相同的插件系统之上
插件目的：解决loader无法实现的其他事

如果在插件中使用了webpack-sources的package，请使用require(‘webpack’).sources替代 require(‘webpack-sources’)，以避免持久缓存的版本冲突

webpack插件是一个具有apply方法的JavaScript对象。apply方法会被webpack compiler调用，并且在整个编译生命周期都可以访问compiler对象

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
	apply(compiler) {
		compiler.hooks.run.tap(pluginName, compilation => {
			console.log('webpack 构建过程开始！');
		});
	}
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

compiler hook的tap方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，以便它可以在所有hook中重复使用

（1）配置方式：在webpack.config.js中配置plugin

插件可以携带参数/选项，所以必须在webpack配置中，向plugins属性传入一个new实例。取决于的webpack用法，对应有多种使用插件的方式

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过npm安装
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
	entry: './path/to/my/entry/file.js',
	output: {
		filename: 'my-first-webpack.bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				use: 'babel-loader'
			}
		]
	},
	plugins: [
		new webpack.ProgressPlugin(),
		new HtmlWebpackPlugin({template: './src/index.html'})
	]
};

（2）Node API方式

在使用Node API时，还可以通过配置中的plugins属性传入插件

some-node-script.js

const webpack = require('webpack'); // 访问webpack运行时(runtime)
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function(err, stats) {
	// ...
});

6.配置（Configuration）

很少有webpack配置看起来完全相同。这是因为webpack的配置文件是JavaScript文件，文件内导出了一个webpack配置的对象。webpack会根据该配置定义的属性进行处理

webpack开箱即用，可以无需使用任何配置文件。webpack会假定项目的入口起点为src/index.js，然后会在dist/main.js输出结果，并且在生产环境开启压缩和优化

通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个webpack.config.js文件，然后webpack会自动使用它

由于webpack遵循CommonJS模块规范，因此，可以在配置中使用：
（1）通过require(…)引入其他文件
（2）通过require(…)使用npm下载的工具函数
（3）使用JavaScript控制流表达式，例如：“?:”操作符
（4）对value使用常量或变量赋值
（5）编写并执行函数，生成部分配置

注意避免以下操作：

（1）当使用webpack CLI工具时，访问CLI参数（应编写自己的CLI工具替代，或者使用–env）
（2）导出不确定的结果（两次调用webpack应产生相同的输出文件）
（3）编写超长的配置（应将配置文件拆分成多个）

webpack配置可以有许多不同的样式和风格。关键在于，为了易于维护和理解这些配置，需要在团队内部保证一致

（1）配置webpack.config.js

const path = require('path');

module.exports = {
	mode: 'development',
	entry: './foo.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'foo.bundle.js'
	}
}

（2）scripts中使用不同的配置文件

如果出于某些原因，需要根据特定情况使用不同的配置文件，则可以通过在命令行中使用–config flag修改此配置文件名称（即不适用默认的配置文件）

package.json

"scripts": {
	"build": "webpack --config prod.config.js"
}

使用名为prod.config.js的配置文件

注意：整个配置中使用Node内置的“path模块”，并在它前面加上“__dirname”这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作

path模块提供了用于处理文件和目录路径的实用程序。可以使用以下命令访问它：

const path = require('path');

7.模式（Mode）

提供mode配置选项，告知webpack使用相应模式的内置优化。
语法：mode : ‘none’ | ‘development’ | ‘production’

（1）方式：webpack.config.js中配置

只需在配置对象中提供mode选项：

module.exports = {
	mode: 'development'
};

（2）方式：CLI参数中传递

webpack --mode=development

mode支持以下字符串值：

参数	描述
development	会将DefinePlugin中process.env.NODE_ENV的值设置为development。为模块和chunk启用有效的名
production	会将DefinePlugin中process.env.NODE_ENV的值设置为production。为模块和chunk启用确定性的混淆名称，FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin和TerserPlugin
none	不使用任何默认优化选项
如果没有设置，webpack会给mode的默认值设置为production

注意：设置NODE_ENV并不会自动地设置mode

如果要根据webpack.config.js中的mode变量更改打包行为，则必须将配置导出为函数，而不是导出对象：

var config = {
	entry: './app.js'
	// ...
};

module.exports = (env, argv) => {
	if (argv.mode === 'development') {
		config.devtool = 'source-map';
	}
	if (argv.mode === 'production') {
		// ...
	}
	return config;
};

未禾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
8.webpack基本使用

Chunk是代码块的意思，webpack在执行构建的时候，会把多个模块合并为一个文件，该文件就称为Chunkwebpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关：（1）如果entry是一个string或array，就只会生成一个Chunk，这时Chunk的名称是main（2）如果entry是一个object，就可能会出现多个Chunk，这时Chunk的名称是object键值对里键的名称。
复制链接

扫一扫