文章目录
  1. 1. Defined
  2. 2. webpack.config.js
    1. 2.1. package.json
    2. 2.2. Base Commands
    3. 2.3. with multi-entries
    4. 2.4. custom distribute folder | Advanced
    5. 2.5. with Bable-loader | Backward Compatibility
    6. 2.6. CSS integration | Normal
    7. 2.7. CSS integration | Advanced
    8. 2.8. Image Loader | Normal
    9. 2.9. Plugin Mode
      1. 2.9.1. Normal plugin list
      2. 2.9.2. Enviornment flags
    10. 2.10. code split
    11. 2.11. Chunks
    12. 2.12. Exclude js file
  3. 3. Reference

Defined

new front 自动工程化 step 2: webpack.
Env: Windows10 + webpack4.x

webpack.config.js

package.json

Quick build shortcuts:

{ “build”: “webpack -p” }

不过现在需要独立安装webpack-cli才能执行上述操作.
而且bundle文件会默认创建在/dist目录下

Base Commands

option decription
webpack -p building for production (min file) - Production Mode
webpack -d including source maps - Debug Mode
webpack –watch for continuous incremental building
webpack –colors making building output pretty

with multi-entries

custom distribute folder | Advanced

Realize with plugins;

in this case, more info with path in NodeJS;
and the path.resolve is just like arr1.concat(arr2, arr3)

with Bable-loader | Backward Compatibility

Module.use and Bable-loader

CSS integration | Normal

CSS file compile into bundle.js, which means style act as like a js Object

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
/* codes ... */
module: {
rules:[
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
};

Webpack style-loader vs css-loader
css-loader: do as url-loader like, just load the css
style-loader: adds CSS to the DOM by injecting a <style> tag

CSS integration | Advanced

React - css module - SASS
实际运用参考: Github-CN
以前看到的BEM style真的被用了上去… 有点痛MindBEMding, 不过这也有一个非常大的优点: performance, 相当于每个style都是唯一, 所以不需要2+级的selector
利用js控制CSS, 也就是所谓的css in js 基础应用 | withou twebapck
CSS Module; 通过名字就能知道核心: module, CSS Module详解 - CN
淘的一个demo 实战参考: webpack-demo

PS: 这一节内容很多, 有点消化不良.

Image Loader | Normal

Base64 limit: only for small/tiny image
just like bable-loader, API page: url-loader | npm

Main.js

1
2
3
let img = document.createElement('img');
img.src = require('./img.png');
document.querySelector('.container').appendChild(img);

The webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
/* codes... */
module: {
rules: {
test: /\.(gif|png|jpg)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192, // 8Mb
}
}
}
},
}

Plugin Mode

take UglifyJs as an example.

Normal plugin list

  • UglifyJs convert x.js into x.min.js
  • html-webpack-plugin create index.html; open-browser-webpack-plugin open default browser tab when webpack loads.
  • user-defined plugin like env

Enviornment flags

with user-defined object as plugin

webpack4.0 new option
The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this
environment.

flag: --mode development / production in scripts

code split

doc

Chunks

  • Common Chunk
  • Vendor Chunk

Exclude js file

Not being converted into bundle.js
webpack.config.js

1
2
3
4
5
externals: {
// require('data') is external and available
// on the global var data
'data': 'data'
}

finished by 03-03.

Reference

webpack-demos V3.1 | ruanyifeng
webpack | official web site

文章目录
  1. 1. Defined
  2. 2. webpack.config.js
    1. 2.1. package.json
    2. 2.2. Base Commands
    3. 2.3. with multi-entries
    4. 2.4. custom distribute folder | Advanced
    5. 2.5. with Bable-loader | Backward Compatibility
    6. 2.6. CSS integration | Normal
    7. 2.7. CSS integration | Advanced
    8. 2.8. Image Loader | Normal
    9. 2.9. Plugin Mode
      1. 2.9.1. Normal plugin list
      2. 2.9.2. Enviornment flags
    10. 2.10. code split
    11. 2.11. Chunks
    12. 2.12. Exclude js file
  3. 3. Reference