Skip to content

Commit 60ab289

Browse files
pomelottpomelott
committed
add dll
1 parent ba02321 commit 60ab289

File tree

13 files changed

+4390
-37
lines changed

13 files changed

+4390
-37
lines changed

‎README.md‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,44 +40,64 @@
4040
docker ps
4141
```
4242
3. 执行构建
43-
```
43+
44+
```bash
4445
docker exec -it -w /home/webpack4-cli b7c2b83ed900 /bin/bash
4546
```
46-
4. 导出build后文件
47-
```
47+
48+
1. 导出build后文件
49+
50+
```bash
4851
docker cp b7c2b83ed900:/home/webpack4-cli/dist ./
4952
```
53+
5054
## 快速使用
55+
5156
* 下载依赖（建议yarn）
52-
```base
57+
58+
```bash
5359
yarn install
5460
```
61+
5562
or
56-
```base
63+
64+
```bash
5765
npm install
5866
```
67+
5968
* 开发模式
69+
6070
```bash
6171
npm run dev
6272
```
73+
6374
* 生产模式
75+
6476
```bash
6577
npm run build
6678
```
79+
6780
* bundle分析
81+
6882
```bash
6983
npm run analyze
7084
```
85+
7186
## 在实际工作中使用 & 自定义 HTML
87+
7288
cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个页面就是一个文件夹。
7389
首先介绍一个html文件夹下可以存放的三个文件：
90+
7491
* entry.js 为本页面的资源入口（无论使用哪种方式定制HTML，此文件都必须存在）
7592
* param.js 为默认模板传递参数（如果你想快速定制HTML，这是个不错的选择）
7693
* page.html 用于重写HTML，若此文件存在，cli将会将page.html的优先级提至最高，用以替代默认模板。
7794

7895
你可以通过以下两种方式自定义HTML：
79-
1. ### 使用param.js 和 entry.js
96+
97+
### 使用param.js 和 entry.js
98+
8099
如果param.js存在，cli则会将param.js中的参数与pug引擎模板结合产出对应HTML，entry.js中引入的资源（js,css）将会被通过标签插入至对应HTML中。
100+
81101
* param.js 中的配置项如下，你也可以通过快速查看demo中的代码例子 来快速上手：
82102
| Name | Type | Default | Description |
83103
|:---:|:---:|:---:|:---:|
@@ -93,6 +113,7 @@ cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个
93113
| vueInit.entrance | String | undefined | vue根实例的入口组件，可详见vue-demo |
94114
| reactInit | Object | {} | 初始化react根节点 |
95115
| reactInit.el | String | undefined | react根实例的el值，如”#root“ 可详见react-demo |
116+
96117
```js
97118
// for detai code, you can view vueDemo in dev mode
98119
module.exports = {
@@ -120,6 +141,7 @@ cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个
120141
}
121142
}
122143
```
144+
123145
```html
124146
<!doctype html>
125147
<html lang="en">
@@ -144,11 +166,13 @@ cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个
144166

145167
</html>
146168
```
147-
2. ### 使用 page.html 和 entry.js
148-
使用page.html 意味着，完全的定制化，你需要完全重写HTML
149169

170+
### 使用 page.html 和 entry.js
171+
172+
使用page.html 意味着，完全的定制化，你需要完全重写HTML
150173

151174
## 在实际工作中使用 & 自定义env
175+
152176
在根路径的 cli-config.js 文件中自定义env,详细选项如下:
153177
| Name | Type | Default | Description |
154178
|:---:|:---:|:---:|:---:|
@@ -158,9 +182,11 @@ cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个
158182
| build.htmlAssetsAbsolutePath | Boolean\|String | false | 控制build环境下，编译后HTML中资源标签的根路径，一般以此来修改为服务器资源基础url或cdn-url |
159183

160184
## 提醒
185+
161186
1. 你可以自定义你的page目录，可根据业务模块嵌套等等。并且输出的html目录也会动态变化。以下有个例子可以帮助您理解，您也可以在cli中尝试
162-
```
163-
Root
187+
188+
```bash
189+
Root
164190
└───src
165191
│———node_modules
166192
|———page // html dir
@@ -180,8 +206,10 @@ cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个
180206
| | └———entry.js
181207

182208
```
209+
183210
输出路径也会自动变化（包括html和静态资源）
184-
```
211+
212+
```bash
185213
Root
186214
|———dist // output root
187215
| |——— js
@@ -203,22 +231,23 @@ cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个
203231
| | |——— ... // css dir is the same as js
204232
| | ...
205233
```
234+
206235
1. src/assets路径用以存放静态文件，例如txt文档等，此路径下的文件将不会被打包，并会原样输出至dist下。
207236
2. 你可以在gulpfile下手动选择压缩插件，通常默认选项就可满足需要。
208237
3. 你可以再 postcss.config.js中自定义, 现在, autoprefixer 已被配置.
209238
4. 注意你的环境版本, ![webpack-versioin](https://img.shields.io/badge/webpack-4.0.0+-green) ![node-versioin](https://img.shields.io/badge/node-v10.8.0-green) ![npm-versioin](https://img.shields.io/badge/npm-v6.2.0-green)
210239
5. 建议使用yarn安装模块包，这将会让你在多人项目中减少因版本不一致带来的问题。
211240

212241
## 核心插件
242+
213243
希望在以下插件中得到更多支持，欢迎给星：
214-
1. <a href="https://github.com/pomelott/html-inline-entry-chunk-plugin">html-inline-entry-chunk-plugin</a>
215-
2. <a href="https://github.com/jantimon/html-webpack-plugin">html-webpack-plugin</a>
216-
3. <a href="https://github.com/webpack-contrib/extract-text-webpack-plugin">extract-text-webpack-plugin</a>
217244

245+
* [html-inline-entry-chunk-plugin](https://github.com/pomelott/html-inline-entry-chunk-plugin)
246+
* [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
247+
* [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin)
218248

219249
## 友情链接
220-
1. <a href="https://www.cnblogs.com/pomelott/p/9030208.html">the split-chunk-plugin Doc</a>
221-
2. <a href="https://www.cnblogs.com/pomelott/p/6974167.html">webpack 1.x help Doc</a>
222-
3. <a href="https://www.cnblogs.com/pomelott/p/8977092.html">webpack 4.x help Doc</a>
223-
224250

251+
* [the split-chunk-plugin Doc](https://www.cnblogs.com/pomelott/p/9030208.htm)
252+
* [webpack 1.x help Doc](https://www.cnblogs.com/pomelott/p/6974167.html)
253+
* [webpack 4.x help Doc](https://www.cnblogs.com/pomelott/p/8977092.html)

‎config/dev/index.js‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,8 @@ const resolveConfig = require('../comm/resolve');
44
const optimizationConfig = require('../comm/optimization');
55
const moduleConfig = require('../comm/module');
66
const outputConfig = require('./output');
7-
// const outputConfig = require('../comm/output')
8-
const contextConfig = require('../comm/context')
97
const {devConf} = require('../static');
10-
const {rootDir, distDir, distPageDir, distJsDir, distCssDir} = require('../tools/path');
11-
const path = require('path')
8+
const {rootDir, distDir} = require('../tools/path');
129

1310
module.exports = {
1411
entry: entryConfig,
@@ -17,20 +14,13 @@ module.exports = {
1714
resolve: resolveConfig,
1815
module: moduleConfig,
1916
optimization: optimizationConfig,
20-
// context: process.cwd(),
21-
// context: path.resolve(__dirname, '../../'),
2217
context: rootDir,
2318
devServer: {
2419
disableHostCheck: true,
2520
contentBase: distDir,
2621
host: devConf.host, // win8 下自启浏览器可能是因为没设置为localhost
2722
port: devConf.port,
2823
open: true, // 开启浏览器
29-
// hotOnly: true,
30-
// overlay: {
31-
// warnings: true,
32-
// errors: true
33-
// },
3424
openPage: 'page/index.html',
3525
inline: true,
3626
compress: true,

‎config/dev/plugin.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
const commonPluginConfig = require('../comm/plugin');
22
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
3+
const webpack = require('webpack');
34
commonPluginConfig.push(
4-
new BundleAnalyzerPlugin({
5-
openAnalyzer: false
6-
})
5+
// dll 可根据需要进行删减
6+
new webpack.DllReferencePlugin({
7+
manifest: require("../../dllOutput/json/dll-babel.json")
8+
}),
9+
new webpack.DllReferencePlugin({
10+
manifest: require("../../dllOutput/json/dll-vue.json")
11+
}),
12+
new webpack.DllReferencePlugin({
13+
manifest: require("../../dllOutput/json/dll-react.json")
14+
}),
715
)
816
module.exports = commonPluginConfig;

‎config/dll/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const _ = require('lodash');
2+
const webpack = require('webpack');
3+
const path = require('path');
4+
module.exports = {
5+
entry: {
6+
react: ['react', 'react-dom'],
7+
vue: ["vue", "vue-router"],
8+
babel: ["@babel/polyfill"]
9+
},
10+
output: {
11+
filename: '[name].dll.js',
12+
path: path.resolve(__dirname, '../../dllOutput'),
13+
library: "dll-[name]"
14+
},
15+
plugins: [
16+
new webpack.DllPlugin({
17+
context: __dirname,
18+
name: "dll-[name]",
19+
path: path.resolve(__dirname, "../../dllOutput/json/dll-[name].json")
20+
})
21+
]
22+
}

‎config/prod/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,8 @@ module.exports = {
1313
module: moduleConfig,
1414
resolve: resolveConfig,
1515
// context: rootDir,
16-
optimization: optimizationConfig
16+
optimization: optimizationConfig,
17+
performance : {
18+
hints : false
19+
}
1720
}

‎dllOutput/babel.dll.js‎

Lines changed: 3876 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dllOutput/json/dll-babel.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎dllOutput/json/dll-react.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"dll-react","content":{"../../node_modules/react-dom/index.js":{"id":"./node_modules/react-dom/index.js","buildMeta":{"providedExports":true}},"../../node_modules/react/cjs/react.development.js":{"id":"./node_modules/react/cjs/react.development.js","buildMeta":{"providedExports":true}},"../../node_modules/object-assign/index.js":{"id":"./node_modules/object-assign/index.js","buildMeta":{"providedExports":true}},"../../node_modules/prop-types/checkPropTypes.js":{"id":"./node_modules/prop-types/checkPropTypes.js","buildMeta":{"providedExports":true}},"../../node_modules/prop-types/lib/ReactPropTypesSecret.js":{"id":"./node_modules/prop-types/lib/ReactPropTypesSecret.js","buildMeta":{"providedExports":true}},"../../node_modules/react/index.js":{"id":"./node_modules/react/index.js","buildMeta":{"providedExports":true}},"../../node_modules/react-dom/cjs/react-dom.development.js":{"id":"./node_modules/react-dom/cjs/react-dom.development.js","buildMeta":{"providedExports":true}},"../../node_modules/scheduler/index.js":{"id":"./node_modules/scheduler/index.js","buildMeta":{"providedExports":true}},"../../node_modules/scheduler/cjs/scheduler.development.js":{"id":"./node_modules/scheduler/cjs/scheduler.development.js","buildMeta":{"providedExports":true}},"../../node_modules/scheduler/tracing.js":{"id":"./node_modules/scheduler/tracing.js","buildMeta":{"providedExports":true}},"../../node_modules/scheduler/cjs/scheduler-tracing.development.js":{"id":"./node_modules/scheduler/cjs/scheduler-tracing.development.js","buildMeta":{"providedExports":true}}}}

‎dllOutput/json/dll-vue.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"dll-vue","content":{"../../node_modules/process/browser.js":{"id":"./node_modules/process/browser.js","buildMeta":{"providedExports":true}},"../../node_modules/setimmediate/setImmediate.js":{"id":"./node_modules/setimmediate/setImmediate.js","buildMeta":{"providedExports":true}},"../../node_modules/timers-browserify/main.js":{"id":"./node_modules/timers-browserify/main.js","buildMeta":{"providedExports":true}},"../../node_modules/vue-router/dist/vue-router.esm.js":{"id":"./node_modules/vue-router/dist/vue-router.esm.js","buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"../../node_modules/vue/dist/vue.runtime.esm.js":{"id":"./node_modules/vue/dist/vue.runtime.esm.js","buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"../../node_modules/webpack/buildin/global.js":{"id":"./node_modules/webpack/buildin/global.js","buildMeta":{"providedExports":true}}}}

0 commit comments

Comments
 (0)