webpack

• 總結
  • 前端模組化程式設計打包工具
  • 可以把模組打包成一個檔案，提高訪問速度，開發速度，優化使用者體驗
  • module.exports 匯出
  • require() 匯入
• 安裝
  • windows： npm install webpack -g
  • mac： sudo npm install webpack -g
• 使用
  • 命令 webpack test01.js bundle.js
  • 將test01.js檔案內容打包到 bundle.js
• 使用配置檔案打包

module.exports = {
    devtool:"eval-source-map",//開啟除錯
    entry: "./index.js",//打包index.js檔案
    output: {
        path: __dirname,//輸出檔案路徑
        filename: "bundle.js"//輸出檔名字
    },
    module: {
        loaders: [//使用webpack loaders模組 
        	//正規表示式以css結尾 //打包css的模組 
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

複製程式碼

webpack 核心模組 loader

Loaders
鼎鼎大名的Loaders登場了！
Loaders是webpack提供的最激動人心的功能之一了。通過使用不同的loader，webpack有能力呼叫外部的指令碼或工具，
實現對不同格式的檔案的處理，比如說分析轉換scss為css，或者把下一代的JS檔案（ES6，ES7)
轉換為現代瀏覽器相容的JS檔案，對React的開發而言，合適的Loaders可以把React的中用到的JSX檔案轉換為JS檔案。
複製程式碼

css-loader style-loader 打包css模組

安裝：npm install css-loader style-loader

引用：

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

打包：webpack test.js bundle.js

或

require("./style.css");

打包：webpack test.js bundle.js --module-bind 'css=style-loader!css-loader'

外掛

例子：安裝內建的 BannerPlugin

外掛，用於在檔案頭部輸出一些註釋資訊。

安裝：npm install webpack --save-dev

var webpack=require('webpack');
 
module.exports = {
    entry: "./test.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
    new webpack.BannerPlugin('內建的 BannerPlugin 外掛，用於在檔案頭部輸出一些註釋資訊。')
    ]
};
複製程式碼

開發環境

監聽程式碼更新

安裝 npm install webpack-dev-server -g

啟動伺服器 webpack-dev-server --progress --colors

訪問網站 http://localhost:8080

devserver的配置選項	功能描述
contentBase	本地伺服器所載入的頁面所在的目錄
port	設定預設監聽埠，如果省略，預設為”8080“
inline	設定為true，當原始檔改變時會自動重新整理頁面

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true//實時重新整理
  } 
}
複製程式碼

教程

簡書webpack教程

菜鳥webpack教程

webpack中文文件