ifengkou / webpack-template Goto Github PK

View Code? Open in Web Editor NEW

100.0 12.0 47.0 236 KB

webpack+gulp 前端工程解决方案模板 - 这个已经很老了，仅具备参考作用（也很久没玩前端了）

JavaScript 99.66% CSS 0.21% HTML 0.14%

webpack-template's Introduction

webpack-template

基于webpack搭建纯静态页面型前端工程解决方案模板

按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新
多入口文件，自动扫描入口。同时支持SPA和多页面型的项目
静态资源按需自动注入到html中，并可自动加上hash值
支持js、css、scss等代码检查、打包、压缩混淆、图片转base64等
公用lib组件抽离打包，生成一个公共的bundle文件
功能标识，根据开发/测试环境和生产环境进行不同配置的打包
支持自动部署打包发布远程服务器

该项目的拆解共7篇博文，从0开始搭建，详情见: cnblog-webpack

why webpack？

它和browserify类似 但是它可以把你的应用拆分成多个文件。如果你的单页应用里有很多页面，用户只会下载当前访问页面的代码。当他们访问应用中的其他页面时，不再需要加载与之前页面重复的通用代码。
它可以替代gulp和grunt 因为他可以构建打包css、预处理css、编译js和图片等。
它支持AMD和CommonJS，以及其他的模块系统(Angular, ES6)。如果你不太熟悉如何使用，就用CommonJS吧。

环境

Node.js

拷贝项目模板

$ git clone https://github.com/ifengkou/webpack-template.git

安装依赖

$ cd webpack-template
$ npm install

目录结构

    .
    ├── config.rb                 # compass配置
    ├── gulpfile.js               # gulp任务配置
    ├── mock/                     # 假数据文件
    ├── package.json              # 项目配置
    ├── README.md                 # 项目说明
    ├── src                       # 源码目录
    │   ├── pageA.html                # 入口文件a
    │   ├── pageB.html                # 入口文件b
    │   ├── pageC.html                # 入口文件c
    │   ├── css/                  # css资源
    │   ├── img/                  # 图片资源
    │   ├── js                    # js&jsx资源
    │   │   ├── pageA.js              # a页面入口
    │   │   ├── pageB.js              # b页面入口
    │   │   ├── pageC.js              # c页面入口
    │   │   ├── helpers/          # 业务相关的辅助工具
    │   │   ├── lib/              # 没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery、Zepto、React等
    │   │   └── utils/            # 业务无关的辅助工具
    │   ├── scss/                 # scss资源
    │   ├── pathmap.json          # 手动配置某些模块的路径，可以加快webpack的编译速度
    ├── webpack.config.allinone.js    # webpack配置
    ├── webpack.config.js         # 正式环境webpack配置入口
    └── webpack-dev.config.js     # 开发环境webpack配置入口

开发要求

约定/src/*.html为应用的入口文件，在/src/js/ 一级目录下需有一个同名的js文件作为该文件的入口。

编译（测试/dev环境）

$ npm run build

编译（生产环境）

生产环境会对js混淆压缩，对css、html进行压缩，字符替换等处理

$ npm run build-online

部署发布

在gulpfile.js 中配置好localServer和remoteServer，编译后将dist目录发布到服务端

发布到localServer

$ npm run deploy

发布到remoteServer

$ npm run deploy-online

本地调试

$ npm run server
# 或者 下面两种模式
$ webpack-dev-server
$ webpack-dev-server --inline

Jenkins 持续集成

jenkins服务器需要nodejs,配置下面的脚本

$ npm run build-online
$ npm run deploy-online

webpack-template's People

Contributors

Stargazers

Watchers

webpack-template's Issues

[Module not found: Error: Cannot resolve module 'image' ] build出错?没有安装image-loader或者移除image-loader?

> [email protected] build webpack-template
> gulp pack --env debug

[15:19:18] Using gulpfile ~/tmp/webpack-template/gulpfile.js
[15:19:18] Starting 'hint'...
[15:19:18] Finished 'hint' after 257 ms
[15:19:18] Starting 'clean'...
[15:19:18] Finished 'clean' after 44 ms
[15:19:18] Starting 'pack'...
[15:19:19] [webpack] Hash: c4ba0b49d3c17aaa8bd0
Version: webpack 1.13.2
Time: 1552ms
                                         Asset       Size  Chunks             Chunk Names
                                   js/index.js    2.96 kB       0  [emitted]  index
                                   js/pageA.js  351 bytes       1  [emitted]  pageA
                                  js/vendor.js     488 kB       2  [emitted]  vendor
css/index.css?79b288e55fa9c7548bb13fe3692be745  369 bytes       0  [emitted]  index
css/pageA.css?c1f47d86b08ab5d1edafdaaeda1ff3fc   25 bytes       1  [emitted]  pageA
                                    index.html  439 bytes          [emitted]  
                                    pageA.html  334 bytes          [emitted]  
chunk    {0} js/index.js, css/index.css?79b288e55fa9c7548bb13fe3692be745 (index) 2.37 kB {2} [rendered]
    [0] ./src/js/index.js 421 bytes {0} [built]
    [1] ./src/css/common.css 41 bytes {0} [built]
    [2] ./~/.0.21.0@css-loader/lib/css-base.js 1.51 kB {0} [built]
    [3] ./src/css/index.css 404 bytes {0} [built] [failed] [2 errors]
chunk    {1} js/pageA.js, css/pageA.css?c1f47d86b08ab5d1edafdaaeda1ff3fc (pageA) 189 bytes {2} [rendered]
    [0] ./src/js/pageA.js 148 bytes {1} [built]
    [6] ./src/css/pageA.css 41 bytes {1} [built]
chunk    {2} js/vendor.js (vendor) 470 kB [rendered]
    [0] multi vendor 40 bytes {2} [built]
    [4] ./src/js/lib/avalon.shim.js 176 kB {2} [built]
    [5] ./src/js/lib/jquery-1.12.4.js 293 kB {2} [built]

ERROR in ./src/css/index.css
Module not found: Error: Cannot resolve module 'image' in webpack-template/src/css
 @ ./src/css/index.css 6:63-92

ERROR in ./src/css/index.css
Module not found: Error: Cannot resolve module 'image' in webpack-template/src/css
 @ ./src/css/index.css 6:183-218

ERROR in ./src/css/index.css
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve module 'image' in webpack-template/src/css

运行npm run build

报错如上，解析image的时候需要image-loader
但是在webpack.config.allinone.js的126行，将image-loader移除之后，只使用url-loader是可以正常解析css中的图片的
So，建议移除这一行

项目太老了,现在webpack已经更新到3+了能否重新做个模板？

TaskList 语法尝试-test

本月计划的任务

完成ES6语法改造
完成非正常单词改造
学完GITHUB特殊技巧

测试环境编译时，漏了一个css文件

index.css样式中设置了背景图片，但index没有被编译到build文件中去，并且我想问一下images为什么也没被build

vendor 库选择注入的疑问

就是判断模块中是否引用了公用库 “vendor”中的脚本，如果没有则不注入到html 里头，这个要怎么实现？

语法异常

ES6 语法导致的异常

'use strict';

var webpack = require("webpack");
var path = require("path");
var glob = require('glob')