用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

CommonsChunkPlugin (公共代码提取插件)

默认会把所有入口节点的公共代码提取出来生成一个新的 JS 代码文件。

• options.name or options.names (string|string[ ]): The chunk name of the commons chunk. An existing chunk can be selected by passing a name of an existing chunk. If an array of strings is passed this is equal to invoking the plugin multiple times for each chunk name. If omitted and options.async or options.children is set all chunks are used, otherwise options.filename is used as chunk name.
• options.filename (string): The filename template for the commons chunk. Can contain the same placeholder as output.filename. If omitted the original filename is not modified (usually output.filename or output.chunkFilename).
• options.minChunks (number|Infinity|function(module, count) -> boolean): The minimum number of chunks which need to contain a module before it’s moved into the commons chunk. The number must be greater than or equal 2 and lower than or equal to the number of chunks. Passing Infinity just creates the commons chunk, but moves no modules into it. By providing a function you can add custom logic. (Defaults to the number of chunks)
• options.chunks (string[]): Select the source chunks by chunk names. The chunk must be a child of the commons chunk. If omitted all entry chunks are selected.
• options.children (boolean): If true all children of the commons chunk are selected
• options.async (boolean|string): If true a new async commons chunk is created as child of options.name and sibling of options.chunks. It is loaded in parallel with options.chunks. It is possible to change the name of the output file by providing the desired string instead of true.
• options.minSize (number): Minimum size of all common module before a commons chunk is created.

webpack.config.js配置

1
2
3

new webpack.optimize.CommonsChunkPlugin(options)
//默认会把所有入口节点的公共代码提取出来,生成一个common.js
new webpack.optimize.CommonsChunkPlugin('common.js')

案例

Commons chunk for entries

Generate an extra chunk, which contains common modules shared between entry points.

1
2
3
4
5
6
7
8
9
10
11
12
13

new CommonsChunkPlugin({
  name: "commons",
  // (the commons chunk name)
  filename: "commons.js",
  // (the filename of the commons chunk)
  // minChunks: 3,
  // (Modules must be shared between 3 entries)
  // chunks: ["pageA", "pageB"],
  // (Only use these entries)
})

You must load the generated chunk before the entry point:

1
2

<script src="commons.js" charset="utf-8"></script>
<script src="entry.bundle.js" charset="utf-8"></script>

Explicit vendor chunk

Split your code into vendor and application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

entry: {
  vendor: ["jquery", "other-lib"],
  app: "./entry"
},
new CommonsChunkPlugin({
  name: "vendor",
  // filename: "vendor.js"
  // (Give the chunk a different name)
  minChunks: Infinity,
  // (with more entries, this ensures that no other module
  //  goes into the vendor chunk)
})

Hint: In combination with long term caching you may need to use this plugin to avoid that the vendor chunk changes. You should also use records to ensure stable module ids.

1
2

<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

Move common modules into the parent chunk

With Code Splitting multiple child chunks of a chunk can have common modules. You can move these common modules into the parent (This reduces overall size, but has a negative effect on the initial load time. It can be useful if it is expected that a user need to download many sibling chunks).

1
2
3
4
5
6
7
8
9
10

new CommonsChunkPlugin({
  // names: ["app", "subPageA"]
  // (choose the chunks, or omit for all chunks)
  children: true,
  // (select all children of chosen chunks)
  // minChunks: 3,
  // (3 children must share the module before it's moved)
})

Extra async commons chunk

Similar to 3., but instead of moving common modules into the parent (which increases initial load time) a new async-loaded additional commons chunk is used. This is automatically downloaded in parallel when the additional chunk is downloaded.

1
2
3
4
5
6
7
8
9
10
11
12
13

new CommonsChunkPlugin({
  // names: ["app", "subPageA"]
  // (choose the chunks, or omit for all chunks)
  children: true,
  // (use all children of the chunk)
  async: true,
  // (create an async commons chunk)
  // minChunks: 3,
  // (3 children must share the module before it's separated)
})

##

1
2

What is Webpack

module bundler

module with dependencies

module generates static assets

Why Webpack

good for development but also the user experience

loaded on demand

cache friendly

webpack plugins can be injected into into the build process

首次使用Webpack, 用CLI, 即Command Line Interface

→ 确认是否安装了NodeJS
npm -v
→ 安装 Webpack
npm install webpack -g
→ 创建一个简单的网站
…..webpacktest/
……….app.js
……….index.html
→ 导航到webpacktest所在文件夹
→ 对app.js文件使用webpack
webpack ./app.js bundle.js
→ 我们看到在webpacktest目录下多了一个bundle.js文件
→ 现在，可以在index.html中引用bundle.js文件，而不是app.js文件

在项目中添加配置文件

→ 在项目根目录下创建名称为webpack.config.js文件
当设置好webpack.config.js文件后，每次我们导航到项目，只要使用webpack这一个命令就可以使用各项功能了。
module.exports = {
entry: “./app.js”,
output: {
filename: “bundle.js”
}
}
→ 命令行来到需要Webpack的网站下
→ 直接输入webpack命令
webpack

启用Webpack观察者模式

当webpack.config.js的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，显得相对麻烦一些。Webpack为我们提供了观察者模式，启用后，任何的webpack.config.js中的变化将接受观察，自动生成最终的js文件。

→ 命令行来到需要Webpack的网站下
→ 启用观察者模式
webpack –watch
→ 在webpack.config.js中添加watch字段，并设置成true
module.exports = {
entry: “./app.js”,
output: {
filename: “bundle.js”
},
watch: true
}
→ 这样，每次修改保存webpack.config.js中引用文件，bundle.js的文件会自动更新。

安装启用Webpack DevServer

1. 导航到目标网站目录
2. 输入npm命令安装Webpack DevServer
   npm install webpack-dev-server -g
3. 输入webpack-dev-server命令
   webpack-dev-server

4. 看到大致如下内容

   1 2 3 4 5 6 7 8

   http://localhost:8080/webpack-dev-server webpack result is served from / cotent is served from D:\... Hash:... Version:webpack1.12.4 Time:94ms ... webpack: bundle is now VALID.

5. 在浏览器中输入：http://localhost:8080/webpack-dev-server/
   同时显示app.js文件中console.log和document.write的内容。

6. 修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新
7. 如果不想显示console.log内容呢？
8. 在浏览器中输入：http://localhost:8080/
9. 此时，再修改webpack.config.js中依赖的文件并保存，浏览器的内容却不会更新？
10. 再次回到命令行，加入一个inline的flag
    webpack-dev-server –inline
11. 此时，如果修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新了☺

Bundling多个文件

→ 在项目下再添加一个login.js文件
console.log(‘login loaded’);
→ app.js中引用login.js文件
require(‘./login’);
document.write(“Welcome to Big Hair Concerts!!Baby”);
console.log(‘App loaded’);
→ 在浏览器中输入：http://localhost:8080/
可以看到变化。
→ 在项目下再添加一个utils.js文件
console.log(‘logging from the utils.js file…’);
→ 来到webpack.config.js下配置如下：
module.exports = {
entry: [“./utils”,”./app.js”],
output: {
filename: “bundle.js”
},
watch: true
}
→ 命令行导航到当前项目下
→ 重新启用Webpack DevServer
webpack-dev-server
→ 在http://localhost:8080/中体现了相应的变化

例子

→ 创建一个名称为demo的文件夹
→ 命令行导航到demo文件夹
→ 创建package.json文件
npm init
然后在命令窗口输入各种信息或直接按Enter键确认，直至最终在demo下创建了package.json文件。

1
2
3
4
5
6
7
8
9
10
11

{
"name": "demo",
"version": "1.0.0",
"description": "some description about demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Darren",
"license": "ISC"
}

→ 为当前demo项目创建webpack

1

$ npm intall webpack --save-dev

运行成功后

在demo文件夹下多了node_modules文件夹

在package.json中多了有关webpack的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "name": "demo",
  "version": "1.0.0",
  "description": "some description about demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Darren",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.5"
  }
}

现在，就可以在当前的demo项目下，在命令行窗口中运用各种命令了。

→ 输入如下命令查看webpack的命令语法

1

$ webpack -h

→ 在demo下创建webpack.config.js文件

1
2
3
4
5
6

module.exports = {
    entry: './main.js',
    output: {
    filename: 'bundle.js' 
    }
};

→ 在demo下创建main.js
document.write(“Webpack for the win!”);
→ 在demo下运行webpack命令
webpack
运行成功，在demo下多了一个bundle.js文件。
→ 在demo下添加index.html

Webpack Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

module.exports = {
    entry: './main.js',
    output: {
        path: './build', // This is where images AND js will go
        publicPath: 'http://yoururl.com/', // This is used to generate URLs
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.coffee$/, loader: "coffee-loader"}, 
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }
};

注意，在output中，把build用来存放生成的bundle.js和图片文件。publicPath用来存放网站地址。
修改index.html文件中的引用路径。

1
2
3
4
5
6
7
8

<html>
<head>
<script type="text/javascript" src="./build/bundle.js"></script>
</head>
<body>
<h1>Webpack Demo</h1>
</body>
</html>

在demo下添加image.coffee文件。

1
2
3
4
5
6

img1 = document.createElement("img")
img1.src = require("./your-small-image.png")
document.body.appendChild img1
img2 = document.createElement("img")
img2.src = require("./your-big-image.png")
document.body.appendChild img2

在main.js中添加

1
2
3
4
5

require("./image.coffee")
require('./second.js');
require("./third.coffee");
require("./image.coffee");
document.write("Webpack for the win!");

在demo下创建styles.css文件。

1
2
3

body {
background: tomato;
}

在main.js中添加

1
2
3
4
5
6

require("./styles.css")
require('./second.js');
require("./third.coffee");
require("./image.coffee");
require("./styles.css")
document.write("Webpack for the win!");

运行webpack命令。

用途说明

()

webpack.config.js配置

1
2

案例

1
2

为什么要合租

合租是最好的选择，可以让你的遇到一路前行的人。分享、收获都是进步的一部分。 –刘素欣

合租计划展示

如有需要发布合租计划可以直接在本站的评论区直接留言

竞争力价格

联系发起人

财务透明

注意： 合租者的个人支付信息，平台不对外公布

Webpack配置文件的重要性

Webpack vs Browserify

技巧