webpack

最新推荐文章于 2022-06-08 17:23:44 发布

孙玉凯

最新推荐文章于 2022-06-08 17:23:44 发布

阅读量343

点赞数

分类专栏： vue.js 文章标签： webpack

本文链接：https://blog.csdn.net/sunshao904/article/details/77743237

版权

vue.js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

webpack 特点

代码拆分
Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

总结下来其主要的优势：

按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新
webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
能被模块化的不仅仅是 JS 了，能处理各种类型的资源。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
扩展性强，插件机制完善

安装

首先要安装 Node.js， Node.js 自带了软件包管理器 npm
用npm 安装webpack

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 查看相关指令

通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack

//进入项目目录
//确定已有package.json，没有就npm init 创建
$ npm install webpack --save-dev

//查看webpack 版本信息
$ npm info webpack
//安装指定版本
$ npm install webpack@1.31.x --save-dev

如果要使用webpack开发工具，要单独安装 webpack-dev-server

$ npm install webpack-dev-server --save-dev

常用命令

webpack

构建命令，webpack的常用参数

$ webpack --config webpack.min.js //另一份配置文件

$ webpack --display-error-details //显示异常信息

$ webpack --watch   //监听变动并自动打包
 
$ webpack -p    //压缩混淆脚本，这个非常非常重要！
 
$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式

在iframe模式下：页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载
在inline模式下：一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面

使用iframe模式，无需额外配置，只需在浏览器输入

http://localhost:8080/webpack-dev-server/index.html

使用inline模式有两种方式：命令行和nodejs API

命令行：在运行时，加上 --inline 选项
```
$ webpack-dev-server --inline
```
访问，通过http://localhost:8080 就可以访问
nodejs API 方式，需要手动把 webpack-dev-server/client?http://localhost:8080 加到配置文件的入口文件处

webpac-dev-server支持Hot Module Replacement，即模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉。

前面主要介绍了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配置入口

一：区分 dev环境和生产环境

重命名 webpack.config.js => webpack.config.allinone.js

内容上，新增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 webpack-dev.config.js

//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

利用 gulp 完成以下工作：

代码检查
clean操作
run webpack pack
deploy 发布

安装gulp

$ npm install gulp gulp-clean jshint gulp-jshint jshint-stylish gulp-sftp gulp-util minimist --save-dev

新增gulpfile.js

完整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))
})

三：package.json 配置

scripts 配置各个指令

启动webpack调试server： npm run server
测试环境打包: npm run build
生产环境打包: npm run build-online
发布到测试环境: npm run deploy
发布到生产环境: npm run deploy-online

完整package.json 如下：

    {
      "name": "webpack-avalon",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "server": "webpack-dev-server --inline",
        "build": "gulp pack --env debug",
        "build-online": "gulp pack --env production",
        "deploy": "gulp deploy --env debug",
        "deploy-online": "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"
      }
    }