Webpack配置開發環境總結

本文主要講解webpack.config.js文件的配置，不會講解webpack是什么，默認你會安裝webpack及其它npm包,並對webpack有一些了解。

下面將從webpack.config.js最基本的概念開始。

1.webpack.config.js常見選項

1.entry : js的入口文件

2.externals : 外部依賴的申明

3.output : 目標文件

4.resolve :　配置別名

5.module : 各種文件，各種loader

6.plugins : 插件

 

2.常用loader介紹

1.html : html-webpack-plugin / html-loader

2.js : babel-loader + babel-preset-es2015

3.css : style-loader + css-loader

4.image + font ： url-loader

3.常用命令

1.webpack : 不壓縮形式打包（調試代碼用，生產環境）

2.webpack -p : 壓縮形式打包（線上發布打包）

3.webpack --watch : 監聽文件的改變

4.webpack --config webpack.config.js : 改變默認配置文件的位置

4.正式開始配置webpack.config.js

首先我要把我演示的項目結構展示出來做個說明

src下page文件夾下每個組件子孫文件夾下，基本上都是js和css兩個文件

 

下面正式說明配置文件的配置方法

1.js的加載方式，采用官方推薦的方式，也就是不使用loader，默認加載

 

2.有的時候我們的入口文件entry不止一個js，此時配置一個對象即可，格式如下

entry: {
      'common':['./src/page/common/index.js'],
      'index':['./src/page/index/index.js'],
      'list':['./src/page/list/index.js'],
      'detail':['./src/page/detail/index.js'],
      'cart':['./src/page/cart/index.js'],
      'order-confirm':['./src/page/order-confirm/index.js'],
      'order-list':['./src/page/order-list/index.js'],
      'order-detail':['./src/page/order-detail/index.js'],
      'payment':['./src/page/payment/index.js'],
      'user-login':['./src/page/user-login/index.js'],
      'user-register':['./src/page/user-register/index.js'],
      'user-pass-reset':['./src/page/user-pass-reset/index.js'],
      'user-pass-update':['./src/page/user-pass-update/index.js'],
      'user-center':['./src/page/user-center/index.js'],
      'user-center-update':['./src/page/user-center-update/index.js'],
      'result':['./src/page/result/index.js'],
      'about':['./src/page/about/index.js']
    }

 

3.輸出文件根據不同類型放置在不同文件夾，output配置如下

 output: {
        path: '/dist/',
        filename: 'js/[name].js'
    },

現在，name會根據entry里每一個對象屬性的key值，生成相應的同名js文件，位置是dist下的js文件夾

 

4.項目中如果要引入jQuery，可以在每個模塊下顯示引入 var $ = require('jQuery'),記得首先npm install jQuery --save。

這樣比較麻煩，所以可以在公共的footer.html里面全局src引入一個cdn上的jQuery,然后為了實現模塊化開發，如下在webpack.config.js

文件里配置

externals:{
        'jquery':'window.jQuery'
    },

現在就可以在每個模塊中方向的使用jQuery了

5.有些時候我們需要把項目中一下模塊提取出來作為公共模塊，供其他模塊引入，這時候我們需要安裝CommonsChunkPlugins，在配置文件里如下設置

var webpack = require('webpack');

首先，在最開始引入webpack這個變量，為接下來配置所用

plugins:[
        // 獨立通用模塊到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name:'common',
            filename: 'js/base.js'
        })
    ]

以上內容中，name指代entry中需要作為公共模塊的那個模塊，filename指代將要把它打包到output中path指代的目錄下的js文件夾下的base.js里

 

6.我們用css-loader和style-loader加載樣式，但是我們希望css文件打包后單獨一個文件夾，而不是默認的那樣打包進js文件里，於是我們需要安裝

extract-text-webpack-plugin，之后配置文件內容如下

plugins:[
        // 獨立通用模塊到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name:'common',
            filename: 'js/base.js'
        }),
        // 把css單獨打包到文件里
        new ExtractTextPlugin("css/[name].css"),
    ]

這句話意思就是把css文件單獨打包到以output指定的path下的css文件下，生成同名的css文件，接下來，要在loader選項里設置如下

 module: {
        loaders: [
          {
              test: /\.css$/,
               loader:  ExtractTextPlugin.extract("style-loader","css-loader")
          }
        ]
    },

這樣就保證css正確加載且打包入單獨文件夾下

 7.webpack處理html模板，為什么還要處理html呢，因為如果我們在開發目錄自己寫好html，手動引入資源，第一很麻煩，第二指定頁面版本號不現實，第三上線一般是dist目錄，這樣我們引入資源的路徑很可能出問題，所以我們應該讓webpack幫我們處理html模板，主要用到 html-webpack-plugin / html-loader ，首先安裝並引入

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

配置文件如下

// 獲取html-webpack-plugin參數的方法
var getHtmlConfig = function(name,title){
    return {
        template:'./src/view/'+name+'.html',
        filename:'view/'+name+'.html',
        favicon:'./favicon.ico',
        title:title,
        inject:true,
        hash:true,
        chunks:['common',''+name+'']
    }
}

首先，我們先把一些公共部分提取出來，這里template就是入口html，filename就是打包的html（路徑），favicon指定圖標的位置，title就是頁面title，inject為true會自動加載頁面資源，hash為true會為html加一個哈希值作為版本號，chunks指定哪些資源模塊會被html加載，傳入兩個參數，name為html文件名，title為html頁面title，接下來繼續配置plugin

plugins:[
      // 獨立通用模塊到js/base.js
      new webpack.optimize.CommonsChunkPlugin({
          name:'common',
          filename: 'js/base.js'
        }),
      // 把css單獨打包到文件里
      new ExtractTextPlugin("css/[name].css"),

      // html模板的處理
      new HtmlWebpackPlugin(getHtmlConfig('index','首頁')),
      new HtmlWebpackPlugin(getHtmlConfig('list','商品列表')),
      new HtmlWebpackPlugin(getHtmlConfig('detail','商品詳情')),
      new HtmlWebpackPlugin(getHtmlConfig('cart','購物車')),
      new HtmlWebpackPlugin(getHtmlConfig('order-confirm','訂單確認')),
      new HtmlWebpackPlugin(getHtmlConfig('order-list','訂單列表')),
      new HtmlWebpackPlugin(getHtmlConfig('order-detail','訂單詳情')),
      new HtmlWebpackPlugin(getHtmlConfig('payment','訂單支付')),
      new HtmlWebpackPlugin(getHtmlConfig('user-login','用戶登錄')),
      new HtmlWebpackPlugin(getHtmlConfig('user-register','用戶注冊')),
      new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset','找回密碼')),
      new HtmlWebpackPlugin(getHtmlConfig('user-pass-update','找回密碼')),
      new HtmlWebpackPlugin(getHtmlConfig('user-center','個人中心')),
      new HtmlWebpackPlugin(getHtmlConfig('user-center-update','修改個人信息')),
      new HtmlWebpackPlugin(getHtmlConfig('result','操作結果')),
      new HtmlWebpackPlugin(getHtmlConfig('about','關於MMall'))


    ]

如上所示，傳入對應的name和title，對html進行了打包處理

 

8.這里說說webpack對icon-font和圖片的處理，這里相對比較簡單，用的loader是url-loader，首先安裝並引入

var ExtractTextPlugin = require("extract-text-webpack-plugin");

配置如下：

module: {
        loaders: [
          {
              test: /\.css$/,
               loader:  ExtractTextPlugin.extract("style-loader","css-loader")
          },
          {
              test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
               loader:  'url-loader?limit=100&name=resource/[name].[ext]'
          }      
        ]
    }

注意的一點是，url-loader會默認把圖片轉換為base64格式，為了能在文件夾中看到圖片文件，可以指定一個limit值，在不小於這個值時，不會把圖片轉換為base64格式，后面

name=resource/[name].[ext] 這句話意思是，在output中path指定的路徑下的resource文件夾下生產同名圖片，格式不變

 

5.使用webpack-dev-server實現頁面熱更新

所謂熱更新就是文件保存時，直接刷新頁面，而不需要手動刷新，這里用到了webpack-dev-server，它的作用就是實現一個前端開發過程中的服務器，可以實現熱更新。其默認的加載方式是iframe，

就是我們的頁面會成為他生成頁面的一個iframe,這有兩個缺點，第一會在頭部有個默認的黑色框，第二在我們改變文件路徑時，url無變化，不利於控制。所以我們采用第二種方式使用它，即在配置文件

里entry的公共模塊入口指定client，但是因為我們只需要在生產環境使用這個client，所以我們可以配置一個環境變量，使得這個client只在開發環境添加，如下所示

// 環境變量的配置,dev/online
var WEBPACK_ENV=process.env.WEBPACK_ENV||'dev';

接着在配置文件中加入如下內容

// 只有開發環境加這句話
if('dev'=== WEBPACK_ENV){
  config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

這里我們指定了端口號，已經指定了只有開發環境才會使用它

 

下面整合配置文件如下

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 環境變量的配置,dev/online
var WEBPACK_ENV=process.env.WEBPACK_ENV||'dev';
console.log(WEBPACK_ENV);
// 獲取html-webpack-plugin參數的方法
var getHtmlConfig = function(name,title){
    return {
        template:'./src/view/'+name+'.html',
        filename:'view/'+name+'.html',
        favicon:'./favicon.ico',
        title:title,   
        inject:true,
        hash:true,
        chunks:['common',''+name+'']
    }
}
var config = {
    entry: {
      'common':['./src/page/common/index.js'],
      'index':['./src/page/index/index.js'],
      'list':['./src/page/list/index.js'],
      'detail':['./src/page/detail/index.js'],
      'cart':['./src/page/cart/index.js'],
      'order-confirm':['./src/page/order-confirm/index.js'],
      'order-list':['./src/page/order-list/index.js'],
      'order-detail':['./src/page/order-detail/index.js'],
      'payment':['./src/page/payment/index.js'],
      'user-login':['./src/page/user-login/index.js'],
      'user-register':['./src/page/user-register/index.js'],
      'user-pass-reset':['./src/page/user-pass-reset/index.js'],
      'user-pass-update':['./src/page/user-pass-update/index.js'],
      'user-center':['./src/page/user-center/index.js'],
      'user-center-update':['./src/page/user-center-update/index.js'],
      'result':['./src/page/result/index.js'],
      'about':['./src/page/about/index.js']
    },
    output: {
      // 絕對路徑
        path: '/dist/',
        publicPath: '/dist/',
        filename: 'js/[name].js'
    },
    externals:{
        'jquery':'window.jQuery'
    },
    module: {
        loaders: [
          {
              test: /\.css$/,
               loader:  ExtractTextPlugin.extract("style-loader","css-loader")
          },
          {
              test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
               loader:  'url-loader?limit=100&name=resource/[name].[ext]'
          }
        ]
    },
    plugins:[
      // 獨立通用模塊到js/base.js
      new webpack.optimize.CommonsChunkPlugin({
          name:'common',
          filename: 'js/base.js'
      }),
      // 把css單獨打包到文件里
      new ExtractTextPlugin("css/[name].css"),

      // html模板的處理
      new HtmlWebpackPlugin(getHtmlConfig('index','首頁')),
      new HtmlWebpackPlugin(getHtmlConfig('list','商品列表')),
      new HtmlWebpackPlugin(getHtmlConfig('detail','商品詳情')),
      new HtmlWebpackPlugin(getHtmlConfig('cart','購物車')),
      new HtmlWebpackPlugin(getHtmlConfig('order-confirm','訂單確認')),
      new HtmlWebpackPlugin(getHtmlConfig('order-list','訂單列表')),
      new HtmlWebpackPlugin(getHtmlConfig('order-detail','訂單詳情')),
      new HtmlWebpackPlugin(getHtmlConfig('payment','訂單支付')),
      new HtmlWebpackPlugin(getHtmlConfig('user-login','用戶登錄')),
      new HtmlWebpackPlugin(getHtmlConfig('user-register','用戶注冊')),
      new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset','找回密碼')),
      new HtmlWebpackPlugin(getHtmlConfig('user-pass-update','找回密碼')),
      new HtmlWebpackPlugin(getHtmlConfig('user-center','個人中心')),
      new HtmlWebpackPlugin(getHtmlConfig('user-center-update','修改個人信息')),
      new HtmlWebpackPlugin(getHtmlConfig('result','操作結果')),
      new HtmlWebpackPlugin(getHtmlConfig('about','關於MMall'))


    ]
};
// 只有開發環境加這句話
if('dev'=== WEBPACK_ENV){
  config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

module.exports  = config;

這里有前面沒講的一個細節如下

output: {
      // 絕對路徑
        path: '/dist/',
        publicPath: '/dist/',
        filename: 'js/[name].js'
    },

注意path指的是打包生成的文件路徑，publicPath指的是訪問頁面時文件的路徑，publicPath必須要設置一下，否則訪問頁面時資源加載可能出問題