webpack 系列目录
基于 webpack 搭建纯静态页面型前端工程解决方案模板, 最终形态源码见 github:
本篇包含以下三点:
前面主要介绍了 webpack 的一些基础用法,该篇做一个整体介绍,如何集成 gulp?如何应对多部署环境?
- .├──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等│ │ └──utils / #业务无关的辅助工具│ ├──scss / #scss资源│ ├──pathmap.json#手动配置某些模块的路径,可以加快webpack的编译速度├──webpack.config.allinone.js#webpack配置├──webpack.config.js#正式环境webpack配置入口└──webpack - dev.config.js#开发环境webpack配置入口
内容上,新增 options 参数,利用 options.debug 来控制 webpack 参数,用来区分开发和生产环境。例如开发环境不需要混淆和压缩 js 文件,但是开发环境需要。通过 option.debug 来区分选择相应的 loader 配置和 Plugin:
- module.exports = function(options) {
- options = options || {}
- var debug = options.debug !== undefined ? options.debug: true;......
- if (debug) {
- //
- } else {
- //
- }
- //webpack.config.js
- 'use strict';
- var webpack_config = require('./webpack.config.allinone') module.exports = webpack_config({
- debug: false
- })
- //webpack-dev.config.js
- 'use strict';
- var webpack_config = require('./webpack.config.allinone') module.exports = webpack_config({
- debug: true
- })
后续可以根据 gulp 指令 动态选择 是开发环境还是测试环境,具体见 gulpfile.js
- //用于gulp传递参数
- var minimist = require('minimist');
- var knownOptions = {
- string: 'env',
- default:
- {
- env:
- process.env.NODE_ENV || 'production'
- }
- };
- var options = minimist(process.argv.slice(2), knownOptions);
- var webpackConf = require('./webpack.config');
- var webpackConfDev = require('./webpack-dev.config');
- var _conf = options.env === 'production' ? webpackConf: webpackConfDev;
- webpack(_conf,
- function(err, stats) {......
利用 gulp 完成以下工作:
- $ npm install gulp gulp - clean jshint gulp - jshint jshint - stylish gulp - sftp gulp - util minimist--save - dev
完整 gulpfile.js 如下:
- /**
- * Created by sloong on 2016/6/14.
- */
- 'use strict';
- var gulp = require('gulp');
- var webpack = require('webpack');
- //用于gulp传递参数
- var minimist = require('minimist');
- var gutil = require('gulp-util');
- var src = process.cwd() + '/src';
- var assets = process.cwd() + '/dist';
- var knownOptions = {
- string: 'env',
- default:
- {
- env:
- process.env.NODE_ENV || 'production'
- }
- };
- var options = minimist(process.argv.slice(2), knownOptions);
- var webpackConf = require('./webpack.config');
- var webpackConfDev = require('./webpack-dev.config');
- var remoteServer = {
- host: '192.168.56.129',
- remotePath: '/data/website/website1',
- user: 'root',
- pass: 'password'
- };
- var localServer = {
- host: '192.168.56.130',
- remotePath: '/data/website/website1',
- user: 'root',
- pass: 'password'
- }
- //check code
- gulp.task('hint',
- function() {
- var jshint = require('gulp-jshint') var stylish = require('jshint-stylish') return gulp.src(['!' + src + '/js/lib/**/*.js', src + '/js/**/*.js']).pipe(jshint()).pipe(jshint.reporter(stylish));
- })
- // clean asserts
- gulp.task('clean', ['hint'],
- function() {
- var clean = require('gulp-clean');
- return gulp.src(assets, {
- read: true
- }).pipe(clean())
- });
- //run webpack pack
- gulp.task('pack', ['clean'],
- function(done) {
- var _conf = options.env === 'production' ? webpackConf: webpackConfDev;
- webpack(_conf,
- function(err, stats) {
- if (err) throw new gutil.PluginError('webpack', err) gutil.log('[webpack]', stats.toString({
- colors: true
- })) done()
- });
- });
- //default task
- gulp.task('default', ['pack'])
- //deploy assets to remote server
- gulp.task('deploy',
- function() {
- var sftp = require('gulp-sftp');
- var _conf = options.env === 'production' ? remoteServer: localServer;
- return gulp.src(assets + '/**').pipe(sftp(_conf))
- })
scripts 配置 各个指令
完整 package.json 如下:
- {
- "name": "webpack-avalon",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "server": "webpack-dev-server --inline",
- "build": "gulp pack --env debug",
- "buildP": "gulp pack --env production",
- "deploy": "gulp deploy --env debug",
- "deployP": "gulp deploy --env production"
- },
- "author": "sloong",
- "license": "MIT",
- "devDependencies": {
- "css-loader": "^0.21.0",
- "ejs-loader": "^0.3.0",
- "extract-text-webpack-plugin": "^1.0.1",
- "file-loader": "^0.8.5",
- "gulp": "^3.9.1",
- "gulp-clean": "^0.3.2",
- "gulp-jshint": "^2.0.1",
- "gulp-sftp": "^0.1.5",
- "gulp-util": "^3.0.7",
- "html-loader": "^0.4.3",
- "html-webpack-plugin": "^2.19.0",
- "jshint": "^2.9.2",
- "jshint-stylish": "^2.2.0",
- "jsx-loader": "^0.13.2",
- "minimist": "^1.2.0",
- "node-sass": "^3.7.0",
- "sass-loader": "^3.2.0",
- "style-loader": "^0.13.0",
- "url-loader": "^0.5.7",
- "webpack": "^1.13.1",
- "webpack-dev-server": "^1.14.1"
- }
- }
来源: http://www.cnblogs.com/sloong/p/5826859.html