webpack入門手冊

1、命令及最終代碼

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

詳細介紹

---

2、webpack使用準備

一、下載並安裝nodejs http://nodejs.cn/
二、使用淘寶鏡像，提升npm下載速度（可選）

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

注意：

• 安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤；
• cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm（若安裝了淘寶鏡像，如下操做將以cnpm代替npm）

三、進入項目目錄，查看package.json

a、若package.json不存在

$ npm init

b、若package.json存在，根據package.json文件安裝模塊（可選）

$ npm install

四、在項目目錄，安裝webpack

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

一般咱們會將 Webpack 安裝到項目的依賴中，這樣就能夠使用項目本地版本的 Webpack

$ npm install --save-dev webpack

–save-dev將安裝信息保存到package.json文件中（好處，多人開發項目時，別人看到package.json文件就知道這個項目依賴於哪些模塊，而且能夠經過npm install直接安裝全部依賴模塊）

3、webpack使用

一、在項目根目錄添加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

二、js文件壓縮打包

// 監聽變更，並自動打包
$ webpack -w --config webpack.config.js

// 壓縮混淆腳本
$ webpack –p --config webpack.config.js

區別：後者文本被壓縮，註釋被刪除、變量名被簡單字母替換，true\false被替換成一、0等
第一種適用於開發過程，第二種適用於最終版本

三、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的鍵名決定的

四、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')

五、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']
        }
      ]
  }
}

錯誤處理

---

一、運行$ webpack -w --config webpack.config.js 時，錯誤信息以下：

webpack的版本不對，去查看歷史安裝信息，有以下提示：

解決方案：

從新安裝webpack，並指定安裝版本

$ npm install --save-dev webpack@1.9.11