-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
halwu(吴浩麟)
committed
Jun 8, 2017
1 parent
3641c65
commit dccd149
Showing
19 changed files
with
358 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| # Created by .ignore support plugin (hsz.mobi) | ||
| .idea/ | ||
| node_modules | ||
| package-lock.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # 管理多个单页应用 | ||
| `AutoWebPlugin` 可以自动管理多个单页应用。简单使用如下 | ||
| ```js | ||
| new AutoWebPlugin('./src/', { | ||
| ignorePages: ['ignore'], | ||
| template: './src/template.html', | ||
| commonsChunk: { | ||
| name: 'common',// name prop is require | ||
| minChunks: 2, | ||
| }, | ||
| outputPagemap: true, | ||
| }) | ||
| ``` | ||
| 以上配置会让`AutoWebPlugin`找出`./src/`目录下的所有目录，为每个目录生产一个HTML作为单页应用的入口。 | ||
| - `ignorePages` 属性用了忽略名叫`ignore`的目录，不为这个目录生产HTML入口 | ||
| - `template` 属性指出所有单页应用生产HTML入口时公用的HTML模版，模版语法和`WebPlugin`里一致。 | ||
| - `commonsChunk` 属性用来为`AutoWebPlugin`找出的所有单页应用抽离公共代码，用webpack自带的`CommonsChunkPlugin`实现。`commonsChunk`的配置属性和`CommonsChunkPlugin`一样。 | ||
| - `outputPagemap` 属性用来输出一个叫`pagemap.json`的文件，里面存放了`AutoWebPlugin`找出的所有单页应用的名称和URL的映射关系。 | ||
|
|
||
| `AutoWebPlugin`还支持很多配置选项，你可以[在这里看到](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/lib/AutoWebPlugin.js#L33)。 | ||
|
|
||
| 更多关于`AutoWebPlugin`的资料可以参考以下文章： | ||
| - [webpack原理与实战](https://github.com/gwuhaolin/blog/issues/4) | ||
| - [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # 在webpack里直接通过JS配置资源注入到HTML | ||
| 通过配置webpack的entry，webpack为我们生产了一系列chunk。但是我们需要把这些chunk注入到HTML里才可以在浏览器里运行起来。 | ||
| `WebPlugin`可以方便的帮你把chunk注入到HTML里。 | ||
| ```js | ||
| new WebPlugin({ | ||
| filename: 'index.html', | ||
| requires: { | ||
| 'ie-polyfill': { | ||
| _ie: true | ||
| }, | ||
| 'inline': { | ||
| _inline: true, | ||
| _dist: true | ||
| }, | ||
| 'dev': { | ||
| _dev: true | ||
| }, | ||
| //load a local google analyze file direct without local var webpack | ||
| './google-analytics.js': { | ||
| _dist: true | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
| 通过`requires`属性可以配置chunk注入到HTML里的方式。`requires`的值可以是一个数组或是一个object。 | ||
| - 为数组时，数组里的每一项都是chunk的名称。 | ||
| - 为object时，可以配置每个chunk的注入方式 | ||
|
|
||
| 支持以下注入方式 | ||
| - `_dist` 只有在生产环境下才引入该资源 | ||
| - `_dev` 只有在开发环境下才引入该资源 | ||
| - `_inline` 把该资源的内容潜入到html里 | ||
| - `_ie` 只有IE浏览器才需要引入的资源，通过 `[if IE]>resource<![endif]` 注释实现 | ||
|
|
||
| 这种方式没有使用HTML模版，`WebPlugin`会采用默认的模版来生成一个HTML。如果你想要更细粒度的控制chunk的注入位置，你最好[使用模版](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template)。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| # 从JS中提取出CSS | ||
| 有些时候webpack生产的chunk里包含了一些CSS代码，这些代码会通过JS注入到HTML HEAD里来加载。如果你想把JS里的CSS提取出来你可以使用`extract-text-webpack-plugin`插件提取。 | ||
| 提取后这个chunk会输出2个文件，一个是纯JS，一个是纯CSS。 | ||
| 这种情况下在使用`WebPlugin`时，你需要把提取出的CSS注入进去，如下： | ||
| webpack配置： | ||
| ```js | ||
| module: { | ||
| loaders: [ | ||
| { | ||
| test: /\.css$/, | ||
| loader: ExtractTextPlugin.extract({ | ||
| fallback: 'style-loader', | ||
| use: 'css-loader' | ||
| }) | ||
| } | ||
| ] | ||
| }, | ||
| entry: { | ||
| 1: './1', | ||
| 2: './2', | ||
| 3: './3', | ||
| 4: './4', | ||
| }, | ||
| plugins: [ | ||
| new ExtractTextPlugin('[name].css'), | ||
| new WebPlugin({ | ||
| filename: 'index.html', | ||
| template: './template.html', | ||
| requires: ['1', '2', '3', '4'] | ||
| }), | ||
| ] | ||
| ``` | ||
| 这样webpack会生成4个名叫 1, 2, 3, 4 的chunk，并且他们里面的CSS都被提取出来了。所以在HTML模版中你需要这样注入提取的CSS | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="zh-cn"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <link rel="stylesheet" href="1"> | ||
| <link rel="stylesheet" href="2?_inline"> | ||
| <link rel="stylesheet" href="3?_ie"> | ||
| <script src="1"></script> | ||
| <!--STYLE--> | ||
| </head> | ||
| <body> | ||
| <script src="2"></script> | ||
| <!--SCRIPT--> | ||
| <footer>footer</footer> | ||
| </body> | ||
| </html> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.