最近在項(xiàng)目中使用了一下webpack，所以這里打算對(duì)目前了解的使用方法做一個(gè)小小的總結(jié)

為什么是webpack

1.webpack一下自己就🔥了，這絕對(duì)是一個(gè)重要的原因。

2.然后我之前項(xiàng)目中都是通過requireJS，通過AMD來做到模塊化開發(fā)。webpak不僅支持打包，而且支持AMD 和 CommonJS方式來做模塊化開發(fā)，所以打算嘗試一下webpack來實(shí)現(xiàn)模塊化。

3.我的需求簡(jiǎn)單，適合新上手webpack，只需要生成上線目錄，實(shí)現(xiàn)模塊化，壓縮代碼等等

webpack實(shí)戰(zhàn)

webpack.config.js 一般寫法

開頭聲明對(duì)路徑相關(guān)的變量，以及引入依賴，包括webpack(非必須)，以及需要的插件
 然后，entry 聲明入口相關(guān)的如文件名，路徑等，output 聲明生成文件相關(guān)的路徑和文件名，module 中是針對(duì)不同文件進(jìn)行處理的 loader 聲明，plugins 聲明了插件的具體使用。

壓縮代碼

這里使用webpack的內(nèi)置的插件，我們寫在webpack.config.js 中的plugins 部分

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
})

提取公共類庫

這部分我沒有用到，但也是基于webpack 內(nèi)置的插件，目的是將用到的jquery 等第三方庫整合到一個(gè)文件，否則都合并到一個(gè)文件，會(huì)造成這個(gè)文件特別大

首先在entry 聲明第三方庫

entry: {
  app: path.resolve(APP_PATH, 'index.js'),
  //添加要打包在vendeors里面的庫
  vendors: ['jquery', 'moment']
},
plugins: {
   //把入口文件里面的數(shù)組打包成vendors.js
  new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}

css 單獨(dú)打包

有的時(shí)候需要將css 單獨(dú)打包，作為CDN，或者我這里的情況是是，頁面引入了很多的css js 文件，而我的js 在最后加載！所以如果是js 中引入的css ，那么會(huì)導(dǎo)致頁面在開始的時(shí)候沒有樣式，知道解析到我的js ！所以這里將css 單獨(dú)打包，單獨(dú)在頁面引入！

首先需要安裝插件

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

然后在webpack.config.js 中聲明插件

// 引入css 單獨(dú)打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 設(shè)置生成css 的路徑和文件名，會(huì)自動(dòng)將對(duì)應(yīng)entry入口js文件中引入的CSS抽出成單獨(dú)的文件
var packCSS = new ExtractTextPlugin('./css/[name].min.css'); 

在plugins 中引入并使用

 plugins: [
  packCSS
 ]

我們需要首先在js 中引用相應(yīng)的css文件

 require('./css/plan.css');

然后這個(gè)插件會(huì)自動(dòng)將js中的css文件提取出來，生成單獨(dú)的文件

樣式的處理

安裝 css-loader style-loader

 npm install css-loader style-loader --save-dev

css-loader會(huì)遍歷css文件，找到所有的url(...)并且處理。style-loader會(huì)把所有的樣式插入到你頁面的一個(gè)style

 module: {
   loaders: [
    { 
     test: /\.css$/,
     loaders: ['style', 'css'],
     include: APP_PATH
    }
   ]
 }

圖片的處理

安裝 url-loader

npm install url-loader --save-dev

webpack.config.js

{
  test: /\.(png|jpg)$/,
  loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'

}

limit 設(shè)置一個(gè)閾值，小于這個(gè)值得圖片就會(huì)自動(dòng)啟用 base64 編碼的圖片，大于這個(gè)值的圖片會(huì)打包到name 這參數(shù)對(duì)應(yīng)的路徑，圖片名稱就會(huì)包括8位md5編碼 name 對(duì)應(yīng)文件本來名稱，ext 對(duì)應(yīng)擴(kuò)展名

我在圖片這里遇到的問題和 css 類似，都是原本我是在 js 中引入 css img 等靜態(tài)資源。但是
 因?yàn)槲业捻撁嬉肓撕芏嗟?css, js 文件，而我的js文件放到最后加載，所以會(huì)導(dǎo)致我的js引用的css img 在最后才加載。這會(huì)導(dǎo)致頁面開始的時(shí)候會(huì)出現(xiàn)沒有樣式，而圖片剛開始會(huì)顯示失敗的問題。

我本來也希望將 img 單獨(dú)打包，但是搜索也實(shí)踐了，沒有找到可靠地實(shí)現(xiàn)方式，于是我把圖片放到了其他公共資源目錄（~~~~(>_<)~~~~，只好暫時(shí)出此下策了）

一個(gè)頁面一個(gè)js 文件

我做的項(xiàng)目是多個(gè)頁面的，所以需要生成每個(gè)頁面對(duì)應(yīng)的不同 js。這里的處理方法就是我們每個(gè) js 都作為一個(gè)不同的入口文件現(xiàn)在 enrty 中。這樣設(shè)置好 output 中的公共路徑，就能得到不同的 js 文件。

  entry: {
    creative: './src/static/js/apps/idea.js',
    plan: './src/static/js/apps/plan.js',
  },
  output: {
    path: 'dist/',
    filename: 'js/[name].min.js'
  }

更新

代碼切分以及異步加載

今天遇到的問題是，我做的一個(gè)頁面是要分為四個(gè)步驟，每個(gè)步驟在進(jìn)入下一步的時(shí)候需要對(duì)下一步的內(nèi)容進(jìn)行接口請(qǐng)求，頁面渲染和事件綁定等操作。

之前的做法

拆分了各個(gè)步驟對(duì)應(yīng)模塊之后，我通過commonJS的方式在入口文件開頭引入了各個(gè)模塊

這時(shí)候是這樣的

  var stepOne = require('./mods/stepone.js');
  var steptwo = require('./mods/steptwo.js');
  ...

  // 使用的時(shí)候
  stepone.checkOne();

這種做法，因?yàn)閏ommonJS 的同步加載機(jī)制，會(huì)導(dǎo)致入口文件打包之后非常臃腫。在首屏，用到用不到處理代碼的都會(huì)在一開始就加載，嚴(yán)重影響了首屏加載時(shí)間。

代碼切分之后

我利用webpack的code splitting 特性，將各個(gè)步驟的代碼進(jìn)行拆分，實(shí)現(xiàn)按需加載。這里主要利用了 webpack 的 require.ensure 函數(shù)實(shí)現(xiàn)的。非常方便，只需要把異步加載的代碼，放到 require.ensure 里面的回調(diào)函數(shù)就可以實(shí)現(xiàn)：

  require.ensure(['./mods/stepone.js'], function(){
    var stepone = require('./mods/stepone.js');
    stepone.checkone();
  }, 'stepone'); // 第三個(gè)參數(shù)設(shè)置打包名稱

這樣設(shè)置，webpack 就會(huì)單獨(dú)生成拆分的文件，我們還需要設(shè)置拆分文件的名字和路徑。這里我費(fèi)了一番周折。

webpack 默認(rèn)給拆分的文件用數(shù)字命名，如果我們自己不進(jìn)行設(shè)置，會(huì)得到 1.min.js 這樣類似的文件。我們可以在 webpack.config.js 中，通過 output.chunkFilename 來設(shè)置分塊生成文件的名稱，分塊的路徑可以通過 output.publicPath 設(shè)置。這里一定要設(shè)置 publicPath，不然得到的路徑有可能不是我們上線打包的路徑。具體我的設(shè)置如下:

  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/apps/[name].min.js',
    publicPath: '/dist/', // 設(shè)置require.ensure路徑
    chunkFilename: 'js/apps/[name].min.js' // 設(shè)置require.ensure 文件名
  }

總結(jié)

webpack 使用起來感覺非常新穎，也容易入手！今天總結(jié)的多是入門的內(nèi)容，后續(xù)還要繼續(xù)使用~

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論