easywebpack-html 纯静态页面构建解决方案
- 支持纯静态页面构建
- 支持 nunjucks 模版方式构建
如何利用 easywebpack-cli工具快速获得一个骨架项目
使用easy-cli你将得到一个具备以下能力的骨架项目:
- 基于Nunjucks模版引擎的模版项目。
- Why? 借助模版引擎，通过把模版拆成更小的碎片，你可以做到静态页面模版的模块化。
- Why? 借助模版引擎，通过把模版拆成更小的碎片，你可以做到静态页面模版的模块化。
- Jquery依赖。
- 基于
CMD的脚本依赖注入方式。 - 自选sass/less等css预处理器。
- 多目录结构且资源分治的打包能力。
Step 1
npm i easywebpack-cli -gStep 2
easy initStep 3
按照指引选择/输入对应内容
Step 4
进入骨架项目目录
npm startEnjoy 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
