webpack学习使用

准备工作

安装node

推荐使用nvm管理node版本 nvm安装教程

初始化项目

1
npm init

生成package.json文件

安装webpack

1
npm install webpack --save-dev

webpack使用

最基础的打包

webpack-demo 目录

1
2
3
4
5
6
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
|- hello.js

/dist/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack-demo</title>
</head>
<body>
<script src="bundle.js"></script><!--bundle是入口文件当webpack打包成功时会自动生成-->
</body>
</html>

/src/hello.js

1
2
let str = 'hello world'
export default str

/src/index.js

1
2
import str from './hello'
alert(str)

webpack打包

1
./node_modules/.bin/webpack src/index.js dist/bundle.js

打包成功

1
2
3
4
5
6
7
Hash: 20cf69121b352c03b3af
Version: webpack 3.6.0
Time: 71ms
Asset Size Chunks Chunk Names
bundle.js 2.94 kB 0 [emitted] main
[0] ./src/index.js 36 bytes {0} [built]
[1] ./src/hello.js 42 bytes {0} [built]

打开 /dist/index.html就会alert(‘hello world’)
这样做的好处就是我们在hello.js定义的str变量并不会污染我们的全局变量

打包成html

安装html-webpack-plugin

1
npm install html-webpack-plugin --sdave-dev

创建webpack.config.js 配置文件

/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist')
}
module.exports = {
entry: {
app: PATHS.app // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: "[name].js", // string
// 「入口分块(entry chunk)」的文件名模板
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo'
}),
],
}

删除dist目录,因为我们配置好之后会自动生成

修改js文件

hello.js

1
2
3
4
5
export default (str = 'hello world') => {
let element = document.createElement('h1')
element.innerHTML = str
return element
}

index.js

1
2
import str from './hello'
document.body.appendChild(str())

打包

我们写好了配置文件也不用加参数了

1
./node_modules/.bin/webpack

打包成功

1
2
3
4
5
6
7
8
9
10
11
12
13
Hash: 3a19bdbfe3d1694e8e01
Version: webpack 3.6.0
Time: 429ms
Asset Size Chunks Chunk Names
app.js 3.06 kB 0 [emitted] app
index.html 180 bytes [emitted]
[0] ./src/index.js 58 bytes {0} [built]
[1] ./src/hello.js 137 bytes {0} [built]
Child html-webpack-plugin for "index.html":
1 asset
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 2 hidden modules

打包成功之类我们项目根目录会自动生成一个dist目录里面有我们需要的index.html和把所有模块打包在一起的app.js打开index.html我们就可以看到hello world

配置打包命令

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"name": "webpack-demo",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --env produciton" //增加一个build命令 后面的参数表示生产环境
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0"
},
"description": ""
}

这样我们就可以使用简便的命令来打包了 另外值得注意的一点是
package.json里面不能写注释 package.json里面不能写注释 package.json里面不能写注释

1
npm run build

配置浏览器自动刷新

安装webpack-dev-server

1
sudo npm install webpack-dev-server --save-dev

配置start命令

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"name": "webpack-demo",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env development",
"build": "webpack --env produciton"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0"
},
"description": ""
}

启动一个服务器

1
npm run start

成功启动一个服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Project is running at http://localhost:8081/
webpack output is served from /
Hash: a01dde575694410dcbe0
Version: webpack 3.6.0
Time: 839ms
Asset Size Chunks Chunk Names
app.js 328 kB 0 [emitted] [big] app
index.html 180 bytes [emitted]
[35] multi (webpack)-dev-server/client?http://localhost:8081 ./src 40 bytes {0} [built]
[36] (webpack)-dev-server/client?http://localhost:8081 7.27 kB {0} [built]
[37] ./node_modules/url/url.js 23.3 kB {0} [built]
[40] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[43] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[45] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
[46] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
[78] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built]
[80] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[83] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[84] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
[85] (webpack)/hot/emitter.js 77 bytes {0} [built]
[86] ./node_modules/events/events.js 8.33 kB {0} [built]
[87] ./src/index.js 58 bytes {0} [built]
[88] ./src/hello.js 137 bytes {0} [built]
+ 74 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.

浏览器里输入

可以尝试修改hello.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
### ip端口号配置
有时候默认端口号被占用或是我们需要局域网的其他设备也能访问
#### 配置端口号
##### 打开webpack.config配置文件
```js
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist')
}
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,//设置端口号
},
entry: {
app: PATHS.app // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: "[name].js", // string
// 「入口分块(entry chunk)」的文件名模板
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo'
}),
],
}

配置ip

打开终端
1
ifconfig

找到en0中的inet字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> mtu 16384
options=1203<RXCSUM,TXCSUM,TXSTATUS,SW_TIMESTAMP>
inet 127.0.0.1 netmask 0xff000000
inet6 ::1 prefixlen 128
inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1
nd6 options=201<PERFORMNUD,DAD>
gif0: flags=8010<POINTOPOINT,MULTICAST> mtu 1280
stf0: flags=0<> mtu 1280
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 78:4f:43:6a:dc:94
inet6 fe80::4e6:8294:e073:df52%en0 prefixlen 64 secured scopeid 0x4
inet 192.168.0.100 netmask 0xffffff00 broadcast 192.168.0.255
nd6 options=201<PERFORMNUD,DAD>
media: autoselect
status: active
.....

打开webpack.config配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist')
}
module.exports = {
devServer: {
host: '192.168.0.100',
port: 8085,//设置端口号
},
entry: {
app: PATHS.app // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: "[name].js", // string
// 「入口分块(entry chunk)」的文件名模板
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo'
}),
],
}

配置ESLint

ESLint规则文档

安装ESLint

1
npm install eslint --save-dev

配置ESLint命令

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"name": "mywebpack",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env development",
"build": "webpack --env produciton",
"lintjs": "eslint src/ webpack.*.js --cache"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"eslint": "^4.7.2",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
},
"description": ""
}

配置ESLint规则

在项目根目录创建.eslintrc.js

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true
},
extends: 'eslint:recommended',
parserOptions: {
sourceType: 'module'
},
rules: {
// enable additional rules
'comma-dangle': ['error', 'always-multiline'],
'indent': ['error', 4],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': [0],
'no-unused-vars': ['warn'],
// disable rules from base configurations
"no-console": 0,
}
}

检测文件是否符合规则

1
npm run lintjs

如果提示有error或warn 我们只需要提示的信息修改即可

自动修复

对于有的不符合代码规范的合适我们可以自动修复

1
npm run lintjs -- --fix

配置打包ESLint检测

安装eslint-loader

1
npm install eslint-loader --save-dev

配置webpack.config.js

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
},
entry: {
app: PATHS.app, // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
],
}

启动服务

1
npm run start

在webpack打包之前 会自动做ESLint检查 如果检查不通过就会失败

配置overlay

如果有错误overlay会在页面上面显示一个遮罩层,在遮罩层中我们可以看到具体的错误提示 这样我们就不用再切到终端去查看了

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
entry: {
app: PATHS.app, // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
],
}

css相关配置

安装css-loader style-loader

这里只能处理本地的文件 远程的入cdn的资源无法导入

1
npm install css-loader style-loader --save-dev

配置webpack.config.js

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
entry: {
app: PATHS.app, // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
//loader顺序是从右往左
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
],
}

在src目录创建common.css

common.css

1
2
3
h1{
color: red;
}

修改src目录下的index.js

index.js

1
2
3
4
import str from './hello'
//导入刚才创建的common.css
import './common.css'
document.body.appendChild(str())

打包

1
npm run start

打开链接 就能看到hello world 变红色了 common.css被成功导入

css模块化

配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
entry: {
app: PATHS.app, // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}]
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
],
}

修改文件

src目录下新增 style1.css style2.css

style1.css

1
2
3
4
5
6
7
body {
background: red;
}
.class1{
color:red
}

style2.css

1
2
3
4
5
6
7
body {
background: white;
}
.class1{
color:green
}

修改src下的index.js

1
2
3
4
5
import str from './hello'
import './common.css'
import style1 from './style1.css'
import style2 from './style2.css'
document.body.appendChild(str(undefined,style1.class1,style2.class1))

打包

1
npm run start

打包成功我们可以发现body的颜色被后者覆盖了 但是h1并没有 用调试工具查看样式 我们可以发现两个h1拥有不同的由哈希生成的className 这样就保证了唯一性

分离css

由于前面我们直接把css和js都打包到了一起 会引起页面的闪动 所以按照原则我们需要把css抽离出来

安装extract-text-webpack-plugin

1
npm install

配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const EextractTextWebpackPlugin = require('extract-text-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
const plugin = new EextractTextWebpackPlugin({
filename: '[name].css',
ignoreOrder: true
})
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
entry: {
app: PATHS.app, // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: plugin.extract({
use: {
loader: 'css-loader',
options: {
modules: true,
},
},
fallback: 'style-loader'
})
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
plugin,
],
}

打包

1
npm run start

成功运行打开浏览器调试工具查看元素可以发现 在head标签里 自动引入了css

文件压缩

安装babel-minify-webpack-plugin

1
npm install babel-minify-webpack-plugin --save-dev

配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const EextractTextWebpackPlugin = require('extract-text-webpack-plugin')
const MinifyPlugin = require('babel-minify-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
const plugin = new EextractTextWebpackPlugin({
filename: '[name].css',
ignoreOrder: true
})
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
performance: {
hints: 'waring',//当资源不符合性能规则时,以什么方式进行提示, 默认值为waring
maxAssetSize: 200000, // 单个资源允许的最大文件容量,单位:字节,默认250kb
maxEntrypointSize: 400000, // 单个入口模块引用的所有资源的最大文件容量,单位:字节,默认250kb
},
entry: {
app: PATHS.app, // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: plugin.extract({
use: {
loader: 'css-loader',
options: {
modules: true,
},
},
fallback: 'style-loader'
})
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
plugin,
//new MinifyPlugin(),
],
}

打包

1
npm run build

通过比较我们可以发现压缩过后的js文件有的明显的减小

配置SourceMaps

配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const EextractTextWebpackPlugin = require('extract-text-webpack-plugin')
const MinifyPlugin = require('babel-minify-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
const plugin = new EextractTextWebpackPlugin({
filename: '[name].css',
ignoreOrder: true
})
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
devtool: 'source-map',
performance: {
hints: 'warning',//当资源不符合性能规则时,以什么方式进行提示, 默认值为warning
maxAssetSize: 500000, // 单个资源允许的最大文件容量,单位:字节,默认250kb
maxEntrypointSize: 500000, // 单个入口模块引用的所有资源的最大文件容量,单位:字节,默认250kb
},
entry: {
app: PATHS.app, // string | object | array
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: plugin.extract({
use: {
loader: 'css-loader',
options: {
modules: true,
},
},
fallback: 'style-loader'
})
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
plugin,
new MinifyPlugin(),
],
}

打包

1
npm run start

用谷歌浏览器查看页面

打开调试工具并选中Sources 左侧点击app.js可以看到最后一行有sourceMap的地址
左侧的

1
2
3
4
5
6
### 分离打包项目代码
#### 安装react
```shell
npm install react --save

配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const EextractTextWebpackPlugin = require('extract-text-webpack-plugin')
const MinifyPlugin = require('babel-minify-webpack-plugin');
const webpack = require('webpack')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
const plugin = new EextractTextWebpackPlugin({
filename: '[name].css',
ignoreOrder: true
})
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
devtool: 'source-map',
performance: {
hints: 'warning',//当资源不符合性能规则时,以什么方式进行提示, 默认值为warning
maxAssetSize: 500000, // 单个资源允许的最大文件容量,单位:字节,默认250kb
maxEntrypointSize: 500000, // 单个入口模块引用的所有资源的最大文件容量,单位:字节,默认250kb
},
entry: {
app: PATHS.app, // string | object | array
vendor: ['react'],
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: plugin.extract({
use: {
loader: 'css-loader',
options: {
modules: true,
},
},
fallback: 'style-loader'
})
},
],
},
plugins: [
//插件
new HtmlWebpackplugin({
title: 'webpack-demo',
}),
plugin,
new MinifyPlugin(),
new webpack.optimize.CommonChunkPlugin({
name: 'verdor'
})
],
}

打包

1
npm run start

查看元素可以看到页面是先引入verdor.js里面就是引入的react.js然后再引入的app.js

配置多页编译

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
const EextractTextWebpackPlugin = require('extract-text-webpack-plugin')
const MinifyPlugin = require('babel-minify-webpack-plugin');
const webpack = require('webpack')
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist'),
}
const plugin = new EextractTextWebpackPlugin({
filename: '[name].css',
ignoreOrder: true
})
module.exports = {
devServer: {
host: process.env.Host,
port: 8085,
overlay: {
errors: true,
warnings: true,
}
},
devtool: 'source-map',
performance: {
hints: 'warning',//当资源不符合性能规则时,以什么方式进行提示, 默认值为warning
maxAssetSize: 500000, // 单个资源允许的最大文件容量,单位:字节,默认250kb
maxEntrypointSize: 500000, // 单个入口模块引用的所有资源的最大文件容量,单位:字节,默认250kb
},
entry: {
index:'./src/index.js',
about:'./src/about.js',
/*app: PATHS.app, // string | object | array*/
vendor: ['react'],
},
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: PATHS.build, // string
// 所有输出文件的目标路径
// 必须是绝对路径(使用 Node.js 的 path 模块)
filename: '[name].js', // string
// 「入口分块(entry chunk)」的文件名模板
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: plugin.extract({
use: {
loader: 'css-loader',
options: {
modules: true,
},
},
fallback: 'style-loader'
})
},
],
},
plugins: [
//插件
/*new HtmlWebpackplugin({
title: 'webpack-demo',
}),*/
plugin,
new MinifyPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
],
}