2017-3-26 webpack入門（一）

2017-3-26 webpack入門（一）

webpack

前端

打包

最近項目裏用到了webpack特地總結一下。來源：http://webpackdoc.com

1 概念

1.1 webpack

是一個前端打包工具，對一些靜態資源（css js img）等進行分析

1.2 CommonJS

CommonJS 規範是爲了解決 JavaScript 的做用域問題而定義的模塊形式，能夠使每一個模塊它自身的命名空間中執行。該規範的主要內容是，=模塊必須經過 module.exports 導出對外的變量或接口，經過 require() 來導入=其餘模塊的輸出到當前模塊做用域中。

1.3 AMD 規範

AMD（異步模塊定義）是爲瀏覽器環境設計的，由於 CommonJS 模塊系統是同步加載的，當前瀏覽器環境尚未準備好同步加載模塊的條件。例如：
定義一個名爲 myModule 的模塊，它依賴 jQuery 模塊：

define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模塊的輸出
    $('body').text('hello world');
});
// 使用
define(['myModule'], function(myModule) {});

2 經常使用命令

wbpack --progress --colors

過參數讓編譯的輸出內容帶有進度和顏色

webpack --progress --colors --watch

若是不想每次修改模塊後都從新編譯，那麼能夠啓動監聽模式

webpack-dev-server --progress --colors

webpack-dev-server會在 localhost:8080 啓動一個 express 靜態資源 web 服務器，而且會以監聽模式自動運行 webpack，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面

webpack --display-error-details

來打印錯誤詳情

3 配置文件

3.1 若是不用命令行，webpack默認按照webpack.config.js的配置進行打包操做

var webpack = require('webpack')
  module.exports = {
    entry: './entry.js',//入口文件
    output: {
      path: __dirname,
      filename: 'bundle.js'//要打包的文件
    },
    module: {
      loaders: [
        {test: /\.css$/, loader: 'style-loader!css-loader'}//配置loader路徑,例如：require('./style.css')
      ]
    },
  plugins: [//配置插件，給文件頭部加註釋
    new webpack.BannerPlugin('This file is created by hwlv')
  ]
  }