webpack入门手册

一、命令及最终代码

// 安装webpack1.9.11版本,也可以不指定版本
$ npm init
$ npm install webpack@1.9.11 --save-dev
// 安装css打包依赖模块
$ npm install --save-dev extract-text-webpack-plugin style-loader css-loader
// 安装sass打包依赖模块
$ npm install --save-dev node-sass sass-loader
// 编译ES6为一般的js
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-polyfill(可选)
    （以下2个可选，建议安装，安装后编译出来的代码更高端）
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-stage-3 babel-runtime

webpack配置文件webpack.config.js

var webpack = require('webpack');
// 引入css 单独打包插件
var ExtractPlugin = require('extract-text-webpack-plugin');
// 设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractPlugin('../cssBuild/[name].min.css');

module.exports = {
  // 配置入口
  entry: {
    index: './js/test.js'
  },
  // 编译后的文件路径
  output: {
    path: './build/jsBuild',
    filename: '[name].build.js'
  },
  module: {
    // 编译规则
    loaders: [
      // 编译ES6
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: ['es2015', 'stage-3']
        }
      }
      //.css 文件使用 style-loader 和 css-loader 来处理
      {
        test: /.css$/,
        loader: ExtractPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /.scss|.sass$/,
        loader: ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')
      }
    ]
  },
  // 辅助的插件
  plugins: [
    packCSS
  ]
}

test.js文件

require('../css/test.scss');
require('../css/test2.css');
require('../css/test3.sass');

webpack.config.js的配置项介绍：

entry —— 用于设置 webpack 执行打包文件的入口，是一个数组

output —— 用于指定生成文件的路径以及文件名等

path —— 指定生成文件路径

publicPath —— 指定域名公共路径

filename —— 指定生成文件的名称

module —— 主要用于配置 loaders

loaders —— 用于配置对应后缀的文件使用何种加载器进行处理
test — 使用正则表达式来指定某种特定的文件类型
exclude — 排除某个文件夹下的文件进行处理
loader — 指定相应的加载器，多个加载器使用 ! 进行连接，每个 loader 都可以省略其后缀，如 babel-loader 可以写成 babel
query — 指定加载器的配置信息，也可以使用 ? 直接连接在 loader 后面

更多的配置信息可以查阅官方文档
https://webpack.github.io/docs/configuration.html

详细介绍

二、webpack使用准备

1、下载并安装nodejs http://nodejs.cn/
2、使用淘宝镜像，提高npm下载速度（可选）

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：

安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（若安装了淘宝镜像，以下操作将以cnpm代替npm）

3、进入项目目录，查看package.json

a、若package.json不存在

$ npm init

b、若package.json存在，根据package.json文件安装模块（可选）

$ npm install

4、在项目目录，安装webpack

$ npm install webpack -g   // -g表示全局

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

$ npm install --save-dev webpack

–save-dev将安装信息保存到package.json文件中（好处，多人开发项目时，别人看到package.json文件就知道这个项目依赖于哪些模块，并且可以通过npm install直接安装所有依赖模块）

三、webpack使用

1、在项目根目录添加webpack.config.js文件

/* webpack.config.js文件 */
var webpack = require('webpack');

module.exports = {
  entry: {
    test: './js/test.js'
  },
  output: {
    path: './build/jsBuild',
    filename: '[name].build.js'
  },
  module: {},
  plugins: []
}

webpack.config.js配置文件详解参见 http://blog.csdn.net/zaichuanguanshui/article/details/53610694

2、js文件压缩打包

// 监听变动，并自动打包
$ webpack -w --config webpack.config.js

这里写图片描述

// 压缩混淆脚本
$ webpack –p --config webpack.config.js

这里写图片描述

区别：后者文本被压缩，注释被删除、变量名被简单字母替换，truefalse被替换成1、0等
第一种适用于开发过程，第二种适用于最终版本

3、css文件打包

（1）安装插件extract-text-webpack-plugin

$ npm install  --save-dev extract-text-webpack-plugin

（注：extract-text-webpack-plugin，可能对webpack的版本有要求，若有以下提示或者类似提示，请重新安装指定版本的webpack，
如 $ npm install --save-dev webpack@1.9.11 )

这里写图片描述

（2）安装loader：css-loader和style-loader

$ npm install --save-dev css-loader
$ npm install --save-dev style-loader

（3）修改webpack.config.js文件

/* webpack.config.js */
var webpack = require('webpack');

// 引入css 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// 设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('../cssBuild/[name].min.css'); 

module.exports = {
  entry: {
    test: './js/test.js'
  },
  output: {
    path: './build/jsBuild',
    filename: '[name].build.js'
  },
  module: {
      loaders: [
        //.css 文件使用 style-loader 和 css-loader 来处理
        {test: /.css$/,loader:  ExtractTextPlugin.extract("style-loader","css-loader")}
      ]
  },
  plugins: [packCSS]
}

（4）在js中引入相应的css文件

/* test.js */
require('./css/test.css')

打包后会在build/cssBuild目录下生成test.min.css文件，css压缩文件的名字是根据引入它的js在webpack.config.js中配置的entry的键名决定的

4、sass文件编译及打包

（1）安装loader：css-loader和style-loader

$ npm install --save-dev node-sass
$ npm install --save-dev sass-loader

（2）修改webpack.config.js文件

/* webpack.config.js */ 

...

module.exports = {

  ...

  module: {
      loaders: [
        {test: /.css$/,loader: ExtractTextPlugin.extract('style-loader','css-loader')},
        {test: /.scss|.sass$/,loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')}
      ]
  },
  plugins: [packCSS]
}

（3）在js中引入相应的css文件

/* test.js */
require('./css/test.scss')

5、ES6编译

（1）安装加载器 babel-loader 和 Babel 的 API 代码 babel-core

npm install --save-dev babel-loader babel-core

安装 ES2015（ES6）的代码，用于转码

npm install babel-preset-es2015 --save-dev

不同阶段语法提案的转码规则（共有4个阶段），选装一个

$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

用于转换一些 ES6 的新 API，如 Generator，Promise 等

npm install --save babel-polyfill

（2）修改webpack.config.js文件

/* webpack.config.js */ 

...

module.exports = {

  ...

  module: {
      loaders: [
        {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/, 
        loader: 'babel-loader', 
        // query: {presets: ['es2015']}}, // 作用和options类似
        options: {
            cacheDirectory: true,
            presets: ['es2015', 'stage-3']
        }
      ]
  }
}

错误处理

1、运行$ webpack -w --config webpack.config.js 时，错误信息如下：

这里写图片描述

webpack的版本不对，去查看历史安装信息，有如下提示：

这里写图片描述

解决方案：

重新安装webpack，并指定安装版本

$ npm install --save-dev webpack@1.9.11