和webpack打個照面——安裝及配置

 webpack

 安裝

命令行輸入

npm install webpack

配置文件 webpack.config.js

moudule.exports = {
  //Import 入口文件
  entry: "./entry.js",
  //Output dir 輸出目錄
  output: {
    path: "",//當前目錄標識：__dirname
    filename: ""
  }
  //dependency 依賴模塊
  module: {
    loaders: [
      {
        test:/\.css$/,
        loader: "style!css"
      }//規定某種文件類型的加載模塊
    ]
  }
}

 模塊化

//遵循CMD規範
var something = "something";
module.exports = something;

---

 引入模塊

 常規模塊

var st = require("something");
console.log(st);//"something"

---

 引入CSS模塊

1. style.css

body {
  background: #f00;
}

2. CSS模塊引入

require("style!css!./style.css");

3. 安裝style-loader，css-loader

npm install style-loader css-loader

4. 在項目配置中配置.css類型的加載器

//在配置文件的module屬性的loaders數組中加入一個配置
{
  test: /\.css$/,
  loader: "style!css"
}

---

 調試工具

1. 啓用devtool插件，並用source-map跟蹤模塊

webpack --devtool source-map

2. 在配置文件中插入devtool的配置屬性

//在webpack.config.js返回的配置模塊中加入一對鍵值
devtool: "source-map"

---

 服務器插件

1. 安裝webpack-dev-server

npm install webpack-dev-server

2. 在項目目錄下運行

webpack-dev-server

這樣執行時會默認的使用iframe模式，即在服務器提供的框架內進行自動刷新頁面，須要訪問localhost:8080/webpack-dev-server目錄下的對應網頁，若是要在localhost:8080下執行自動刷新，應當使用--inline模式，在命令行輸入

webpack-dev-server --inline

---

 支持ES6

1. 安裝babel插件

//將babel相關的模塊都安裝
npm install babel-loader babel-core babel-preset-es2015 --save-dev

2. 在配置文件中的進行配置

//在配置文件中加入一個新的loader字段
{
  test: /\.js$/,
  loader: "babel"
}

3. 創建並配置.babelrc文件

//在.babelrc文件中直接輸入
{
  "presets": ["es2015"]
}

PS：這樣配置會使全部的.js文件進行一次轉換

 圖片壓縮

這裏的圖片壓縮是將超過限制（自定義）的圖片轉換成base64編碼的文檔。

1. 須要的插件爲url-loader,而該插件依賴於file-loader，若是沒有，兩者都須要安裝。

//先安裝file-loader（若是沒有）
npm install file-loader --save-dev
//安裝url-loader
npm install url-loader --save-dev

2. 添加loaders字段

{
  test: /\.(jpg/png/gif)$/,
  loader: "url-loader?limit=10000"
}//limit爲文件大小限制,單位爲bit

 文件打包分離

下載extract-text-webpack-plugin來實現css文件的打包

1. 下載插件

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

2. 配置etwp

//在配置文件中新建一個etwp的實例
var etwp = new require("extract-text-webpack-plugin");
//在plugins字段中引入
plugins: [
  etwp
]
//在loaders字段中加入
{
  test: /\.css$/,
  loader: etwp.extract("styles.css")//切記是調用etwp中的extract方法
}

 實現common.js的生成

common.js是將各個頁面中的公共模塊提取出來組成的集合，減小了模塊的重複調用

配置方法

//在配置文件中
var buildCommon = new require("webpack.optimize.CommonsChunkPlugin");

//配置不一樣的buddle.js輸出
entry: {
  page1: "./js/entry.js",
  page2: "./js/entry2.js"
}

//在plugins字段中加入
plugins: [
  buildCommon("common.js")
]

webpack官網
webpack中文文檔
原文連接