Git Product home page Git Product logo

easywebpack-multiple-html-boilerplate's Introduction

easywebpack-multiple-html-boilerplate

HTML静态多页面Webpack构建工程化解决方案骨架

特性

  • 支持 HTML 静态多页面构建
  • 支持 nunjucks 模板静态多页面构建
  • 支持 Webpack 构建自动刷新功能
  • 支持 babel, es6, postcss, eslint等特性
  • 支持 css, sass, less, styus
  • 支持构建结果UI展示
  • 支持独立HTML模板和全局HTML模版
  • 支持 easywebpack-cli 创建项目和构建

更多特性请见 基于 Webpack 的前端构建工程化解决方案

版本

  • easywebpack-html ^4.x.x > webpack 4.x.x
  • easywebpack-html ^2.x.x > webpack 3.x.x

安装

npm install
npm install easywebpack-cli -g

运行

npm start 

// or
easy start

// or
node build

编译

npm run build

// or
easy build prod 

// or
node build

HTML模板

  • 独立模板, Entry目录下面包含同名的HTML页面
  • 全局模板(entry.template), 没有独立模板时,将采用全局模板.

HTML构建时, 首先取独立模板,如果文件存在,则使用独立模板, 否则取全局模板.

nunjucks

nunjucks loader 默认是禁用, 你可以通过如下方式开启:

// webpack.config.js
module.exports = {
  loaders: {
    nunjucks: {
      options: {
        searchPaths: ['./widget', './test']  // nunjucks 模板查找目录
      }
    }
  },
}

HTTP Proxy

use koa-proxy plugin proxy http request:

// webpack.config.js
module.exports = {
  proxy: {
    host:  'http://localhost:8888',   
    match: /\/debug/
  },
}

easywebpack-multiple-html-boilerplate's People

Contributors

hubcarl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

easywebpack-multiple-html-boilerplate's Issues

使用过程的几个疑问

  • webpack打包后的html引用的js和css,使用的是绝对路径。希望能改为相对路径
  • 使用了postcss,但为什么打包后css文件并未自动添加兼容性前缀?如transform: rotate(45deg)打包后还是原样
  • 希望集成webpack-dev-server功能
  • 开发模式下,就已经使用webpack对文件进行处理了?这样不利于debug吧?

进行扩展中的一个问题

例如这个example是可以打开nunjucks的,在使用这个模板的过程中,如果我想使用zepto.js,将他放在asset/js的目录中,在模板中通过 <script type="text/javascript" src="/asset/js/zepto.min.js"></script>引入,但当本地启动时,并不能成功加载,请问该如何解决。

项目打包后,autoprefixer不起作用

你好,本地运行时autoprefixer是生效的,但是打包后生成的css文件还是原样,是否有其他地方未配置?
postcss.config的配置如下:
module.exports = { plugins: [ require('autoprefixer') ] }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.