walkerqiao-wpexpress

1.0.0 • Public • Published

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, 可根据具体情况修改为响应的域名名称即可。

参考链接

Dependencies (13)

Dev Dependencies (38)

Package Sidebar

Install

npm i walkerqiao-wpexpress

Weekly Downloads

1

Version

1.0.0

License

ISC

Last publish

Collaborators

  • walkerqiao