webpack用法總結

　　原先已經翻譯過一篇關於webpack的文章了，那是剛開始學習webpack時參考阮一峰的教程，順便就把它的英文文章給翻譯了過來。Webpack是一個強大的模塊化打包和構建工具，不僅能對JS進行打包，而且還能通過加載器對CSS 、image 、font 進行打包，引用時直接當作模塊來引用，最后統一打包成一個bundle.js文件來輸出；同時Webpack還支持插件功能，其各種插件大大豐富了webpack的功能，如最常見的html-webpack-plugin插件，能由寫好的模版在編譯后直接生成所需要的html頁面，方便維護、擴展和部署上線。此外，Webpack還能對css進行預處理, 如使用postcss－loader中的autoprefixer 、pxtorem等功能實現CSS免前綴 ，px自動轉換為rem；使用less-loader 、scss-loader直接引用less、scss文件；使用css-loader中的css modules實現CSS樣式的局部與全局編寫，並用hash值來進行樣式命名，讓你在編寫代碼時再也不用為命名而發愁了。。。總之，Webpack給人以無所不能的感覺，但是上手麻煩，配置項看起來讓新手一臉懵逼，遠不如gulp小而靈巧，應該也算是它的一個弊端吧！

　　因在Webpack里踩過的坑實在太多了，所以便對自己現階段所了解的用法作一個總結，后續學習再逐漸完善上去。

一、配置文件

　　配置文件中主要分為入口文件處理、輸出處理、加載器、插件、webpack開發服務器這幾個部分，因webpack開發服務器這部分內容較多，放到后面詳細介紹。

var webpack = require('webpack');
var path = require('path');

// _dirname 為當前模塊文件所在目錄的絕對路徑
// path.resolve 相當於 _dirname + build 進行地址拼接
var buildPath = path.resolve(__dirname,"build");
var nodemodulesPath = path.resolve(__dirname,'node_modules');

var autoprefixer = require('autoprefixer');
var px2rem = require('postcss-pxtorem');
var px2remOpts = {
    rootValue: 100,
    propWhiteList: [],
};

var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {

    //入口文件配置
    entry:｛
        // 入口文件路徑
        index:path.resolve(__dirname,'src/main.js'),

        // 為了優化，切割代碼，提取第三方庫
        vendor: [
          'react',
          'react-dom',
          'react-router'
        ]
        
    ｝,

    resolve:{
        // extentions: 配置文件的擴展名，當在import文件時，不用在需要添加擴展名
        // 默認的擴展名為[“”, “.webpack.js”, “.web.js”, “.js”]
        // 空字符串在此是為了resolve一些在import文件時不帶文件擴展名的表達式
        extentions:["","jsx","json","js","web.js"],

        // 路徑別名, 懶癌福音
        alias:{
          app:path.resolve(__dirname,'src/js'),
          // 以前你可能這樣引用 import { Nav } from '../../components'
          // 現在你可以這樣引用 import { Nav } from 'app/components'

          style:path.resolve(__dirname,'src/styles')
          // 以前你可能這樣引用 @import "../../../styles/mixins.scss"
          // 現在你可以這樣引用 @import "style/mixins.scss"
        }          
    },

    //文件導出的配置
    output:{
        path:buildPath,               // 輸出路徑
        filename:"app.js"             // 輸出文件名 
    },

    // 生成source-map , 便於開發者debug 
    devtool: 'eval-source-map',

    module: {
        //loaders加載器
        loaders: [
            // babel ES6解析
            {
                test: /\.(js|jsx)$/,                 // 用正則來驗證所要測試的文件后綴名
                include: [path.resolve(__dirname, "src/app")],  // 所要處理文件的路徑
                exclude: [nodemodulesPath],             // 排除不處理的目錄
                // 加載器的名字，不同加載器之間用！連接，？為使用該加載器后附帶的功能 , 加載器的執行為從后往前執行
                loader: 'babel' 
            },
                                     
            // image解析
            {
                test:/\.(png|jpg)$/,
                loader:'url-loader?limit=50000'
            },
            // CSS文件解析
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }

        ]
    },

    // postcss平台
    // 此處配置了免前綴功能和px轉換為rem功能
    postcss: [ autoprefixer({ browsers: ['last 2 versions'] }),px2rem(px2remOpts) ],

    plugins: [

        //   優化使用模塊
        new webpack.optimize.OccurrenceOrderPlugin(), 
        // webapck 會給編譯好的代碼片段一個id用來區分
        // 而這個插件會讓webpack在id分配上優化並保持一致性。
        // 具體是的優化是：webpack就能夠比對id的使用頻率和分布來得出最短的id分配給使用頻率高的模塊


        //   壓縮代碼
        new webpack.optimize.UglifyJsPlugin({
              compressor: {
                warnings: false
              }
        }), 


        //  去除debug提示信息
        // 很多庫的內部，有process.NODE_ENV的判斷語句，
        // 改為production。最直觀的就是沒有所有的debug相關的東西，體積會減少很多
        new webpack.DefinePlugin({
              'process.env': {
                'NODE_ENV': JSON.stringify('production')
              }
        })


        // 'vendor' 就是把依賴庫(比如react react-router, redux)全部打包到 vendor.js中
        // 'vendor.js' 就是把自己寫的相關js打包到bundle.js中
        // 一般依賴庫放到前面，所以vendor放第一個
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js' ),


        new HtmlWebpackPlugin({
              template:'src/index.html',
              // html模板的路徑
              
              title: '產品模式',
              // html模版的標題
              
              filename:'index.html',
              // 文件名以及文件將要存放的位置

              favicon:'./src/favicon.ico',
              // favicon路徑
              
              inject:'body',
              // js插入的位置，true/'head'  false/'body'

              chunks: ['vendor', 'index' ],
              // 指定引入的chunk，根據entry的key配置，不配置就會引入所有頁面的資源

              hash:true,
              // 這樣每次客戶端頁面就會根據這個hash來判斷頁面是否有必要刷新
              // 在項目后續過程中，經常需要做些改動更新什么的，一但有改動，客戶端頁面就會自動更新！

              minify:{
              // 壓縮HTML文件
                removeComments:true,
                // 移除HTML中的注釋

                collapseWhitespace:true
                // 刪除空白符與換行符
              }
        })
    ]
}

module.exports = config;

　　上面代碼中詳細介紹了Webpack的用法和在實際項目開發過程中的常用的加載器和插件

二、啟動運行

　　Webpack該如何啟動運行編譯了，主要有以下幾種方法：

　　1. 啟動編譯　

webpack    //  默認執行 webpack.config.js文件
webpack --config webpack-pro-config.js       //執行另一份配置文件 
webpack --display-error-details //顯示異常信息 
webpack --watch //監聽變動並自動打包 
webpack -p //壓縮混淆腳本，這個非常非常重要！ 
webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了

　　2.快捷執行

　　當我們想執行webpack的執行命令時，我們就得在命令行中輸入很長一遛的命令，自己操作起來很不方便，同時也不便於后續人員的維護, 我們可以把執行命令寫在package.json文件中的scripts鍵中，這樣我們每次執行時只需敲自定義的命令即可

"scripts": {
    "start": "webpack --watch",      // npm start  
    "dev": "webpack-dev-server --host 0.0.0.0",    // npm run dev
    "pro": "webpack --config webpack-pro-config.js --progress --colors"   // npm run pro
  }

  

webpack各加載器和插件用法詳細介紹：

1.  上次我翻譯的webpack-demo