webpack工程化开发

源码结构一(对应webpack.config.js)

+---- src
|--------- js
|------------- components
|------------------- dialog
|------------------------- css
|------------------------- img
|------------------------- tmpl
|------------------------- index.js
|------------- page
|------------------ index.js
|------------------ about_us.js
|--------- css // 样式目录， 可包括scss, css, less等，这里没有详细针对这块做过多考虑
|--------------- lib
|--------------- common
|--------------- page
|-------------------- index.css
|--------- imgs // 图片目录
|--------- fonts // 字体目录
|--------- views // 入口模版目录
|-------------- common
|-------------------- header.html
|-------------------- footer.html
|-------------------- ...
|-------------- index.html
|-------------- about.html
|-------------- other.html

入口介绍

入口html是src/views下面的html文件，比如index.html, about.html, 对应的入口js为src/page/xxx.js. html支持include, 入口html需要包含完整的结构， 包括head, body的完整html, 包含的部分html不含完整标签结构。 入口js负责js资源以及样式资源的引入。

webpack打包

首先将images, css, js根据依赖关系，打包到目标目录public下面， 然后根据模版文件生成对应的html， 同时在html插入资源的目标地址。

源码结构二(对应wpconfig/webpack.config.js--1配置文件)

+---- src
|--------- js
|-------------- libs    // js类库
|-------------- stores  // js Model层
|-------------- actions // js action层
|-------------- components // js 组件
|-------------- index.js  // 入口js
|-------------- contact_us.js // 入口js 2
|-------------- ......
|--------- css // 样式目录， 可包括scss, css, less等，这里没有详细针对这块做过多考虑
|--------- images // 图片目录
|--------- fonts // 字体目录
|--------- html // 入口模版目录
|-------------- index.html

构建目标

webpack支持环境变量，可以有效配合开发环境、调试环境和生产环境的构建。

开发环境下面， 我们一般需要借助webpack-dev-server插件，利用它的HMR特性，可见即所得， 有效提高开发效率。 同时在开发模式下面，我们不需要对资源进行压缩丑化。

在生产环境下面， 我们需要对资源有效压缩, 另外会将资源进行md5 hash重命名。

为了更好得构建和代码管理， 需要至少两个构建目标，我们将这两种构建目标分别与环境变量相对应。 我这里使用d表示debug, 开发环境。 r表示release,发布环境，生产环境。

下面看以下具体得构建目录结构:

+-- public 
|------ d
|--------- js
|-------------- index.js  // 入口js
|-------------- contact_us.js // 入口js 2
|-------------- ......
|--------- css // 样式目录， 可包括scss, css, less等，这里没有详细针对这块做过多考虑
|--------- images // 图片目录
|--------- fonts // 字体目录
|------ r
|--------- js
|-------------- index_[hash8].js  // 入口js
|-------------- contact_us_[hash8].js // 入口js 2
|-------------- ......
|--------- css // 样式目录， 可包括scss, css, less等，这里没有详细针对这块做过多考虑
|--------- images // 图片目录
|--------- fonts // 字体目录
|-- views
|------ d
|-------------- index.html
|-------------- contact_us.html
|------ r
|-------------- contact_us.html

配置详解

webpack的几个主要配置项目如下:

• entry: js资源打包的入口， 可以指定单个文件；也可以指定多个js文件。本例中使用getEntry函数列出src/js下面的.js文件(不含子目录， 子目录中为类库或依赖包之类的)。
• output: 输出目标设置，包括输出资源的名字方式，分块名称，以及公共访问路径之类的配置。
• modules: 模块配置， 比如资源加载器loaders的设置。
• plugins: 构建项目使用的插件列表， 很多是关于构建优化方面的插件，比如公用资源提取、资源丑化压缩、产生html模版、ProvidePlugin(用于减少代码冗余非常有用)。

踩坑记录

• HMR需要先生成提供页面内容的目录及文件。注意HMR的环境变量和生成其目录内容的环境变量是否相同。
• HMR对于本机开发，本机查看效果的情况， localhost配置足够。 但是如果开发机器在其他地方，ip地址不同，那么就需要配置host或ip来提供资源变化信息， 这个是在server.js中，设置了一个变量domain, 可根据具体情况修改为响应的域名名称即可。

参考链接

• http://kuaima.toutiao.com/default/ji-yu-webpackde-qian-duan-gong-cheng-hua-kai-fa-he-shi-jian/
• http://survivejs.com/webpack_react/developing_with_webpack/
• https://segmentfault.com/a/1190000004511992