Naive Puppets Marching

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

    参考链接

    Install

    npm i walkerqiao-wpexpress

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • walkerqiao