easywebpack-html 纯静态页面构建解决方案

  • 支持纯静态页面构建
  • 支持 nunjucks 模版方式构建

如何利用 easywebpack-cli工具快速获得一个骨架项目


使用easy-cli你将得到一个具备以下能力的骨架项目:

  • 基于Nunjucks模版引擎的模版项目。
    • Why? 借助模版引擎,通过把模版拆成更小的碎片,你可以做到静态页面模版的模块化。
  • Jquery依赖。
  • 基于CMD的脚本依赖注入方式。
  • 自选sass/less等css预处理器。
  • 多目录结构且资源分治的打包能力。

Step 1

npm i easywebpack-cli -g

Step 2

easy init

Step 3

按照指引选择/输入对应内容

Step 4

进入骨架项目目录

npm start

Enjoy It Easily~

Step 5

构建生产环境内容。

npm build

配置编写

基于 Webpack 原始配置构建

你可以在easy-cli生成的骨架项目中看到这样的配置内容。

基础配置含义可以参考,通用的基础配置介绍

(注:有时我们需要获得webpack的原生能力。我们可以借助额外配置的方式直接和webpack沟通。)

const path = require('path');
module.exports = {
  framework: 'html', // 指定用 easywebpack-html 解决方案, 请在项目中安装该依赖
  entry: 'src/**/*.js',
  externals: {
    jquery: 'window.$'
  },
  module: {
    rules: [
      { scss: true },
      {
        nunjucks: {
        options: {
          searchPaths: ['./widget'] // 配置查找模板路径
        }
      }
    ]
  }
};

配置说明

template: html 公共模板文件路径, 默认 src/view/layout.html

template: 'src/view/layout.html'
  • 表示构建HTML的公共模版文件。
  • 如果页面目录下面有 entry 的同名的 html 文件,将自动使用目录下的 html 作为 HTML 模板,不再使用统一的公共模版。

运行开发

easy dev

打包编译

easy build

基于 Webpack 原始配置构建

Webpack 原始配置编写

// webpack.config.js
const easywebpack = require('easywebpack-html');
const webpack = easywebpack.webpack;
const merge = easywebpack.merge;
const env = process.env.BUILD_ENV;
const baseWebpackConfig = easywebpack.getWebpackConfig({
    env, // 根据环境变量生成对应配置,可以在 npm script 里面配置,支持dev, test, prod 模式
    entry: {
      home: 'src/page/home/home.js'
    },
    module: {
      rules: [
        { scss: true },
        {
          nunjucks: {
          options: {
            searchPaths: ['./widget'] // 配置查找模板路径
          }
        }
      ]
      }
});

// 拿到基础配置, 可以进行二次加工
const webpackConfig = merge(baseWebpackConfig, { 
  // 自定义配置
})

module.exports = webpackConfig;

本地开发

  • 使用 webpack-dev-server : webpack-dev-server --hot
  • 使用 easywepback-cli: easy dev --webpack

打包编译

  • 使用 webpack-cli : webpack --mode production --config webpack.config.js
  • 使用 easywepback-cli: easy build --webpack

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
热更新 热更新
easywebpack 是通过 koa-webpack-hot-middleware 和 koa-webpack-dev-middleware 插件实现热更新机制。具体实现封装成独立 webpack-tool 插件,该插件除了集成在 easywebpack 里面,同时也可以单独使用。下面详细说...
2020-05-31 sky
Next 
loaders loaders
v3 代表 easywebpack 3.x.x, v4 代表 easywebpack 4.x.x内置配置 loaderseasywebpack 内置了 babel, eslint, css, sass, less, stylus, urlimage, urlfont 等loader,easyw...
2020-05-31 sky