webpack學習筆記

Demo01: Entry file

組織架構如圖，

 

demo01

bundle.js爲自動生成，package.json爲配置文件，也不用管。

因此只須要關心三個類型的三個文件，即index.html，main.js，webpack.config.js，見名知意，第一個是html文件，裏面加載進去js文件便可；main.js裏面包含你想作的事情，demo中打印一句話；剩下的webpack.config.js就是整個webpack工程的配置文件了。

module.exports = {

  entry: './main.js',

  output: {

    filename: './bundle.js'

  }

};

entry是入口，output是輸出生成的bundle文件對應關係。

運行   cd  demo01，而後npm run dev便可

Demo02: Multiple entry files

首先運行起來看一眼區別，cd demo02， 而後npm run dev走你。

 

demo02-1

如圖，demo02只是比demo01多打印了一句話而已。

直接看index.html文件，

 

demo02-2

如圖，demo02只是多加載進來一個js文件而已，打開看看兩個JS文件，裏面分別只有一句打印一句話的代碼而已。略過不提。

package.json文件依舊無論，兩個bundle.js文件也無論，兩個main.js文件簡單的一句話也看過了，那就剩下webpack的配置文件了。代碼先粘出來，

module.exports = {

  entry: {     //  入口

    bundle1: './main1.js',    //  第一個JS文件

    bundle2: './main2.js'    //  第二個JS文件

  },

  output: {

    filename: '[name].js'    //   輸出文件命名

  }

};

如圖可見，在entry裏，再也不像demo01中那樣只有入口文件名，而是兩組key-value，value的值都是咱們的JS文件名字（帶有相對路徑），那麼，key，咱們猜測就是對應生成的bundle文件名了吧。

再看下方的output輸出對應關係，filename的值爲 [name].js，那麼這個name應該就是一個變量，對應的是entry中的key。既然這樣，那咱們來驗證一下。

添加第三個JS文件，main3.js，也隨便打印一句話。而後再配置文件中加入配置：

module.exports = {

  entry: {     //  入口

    bundle1: './main1.js',    //  第一個JS文件

    bundle2: './main2.js',    //  第二個JS文件

    bundle3: './main3.js'     //    添加的第三個文件

   },

  output: {

    filename: '[name].js'    //   輸出文件命名

  }

};

而後在html文件中引入加載咱們生成對應的bundle3.js文件，如圖

 

demo02-3

OK，添加完畢，編譯，運行。

編譯：npm build    運行：npm run dev，

 

demo02-4

   搞定，猜測正確。

Demo03: Babel-loader 

先上結構圖：

 

demo03-1

有沒有發現JS文件不見了，而多了一個JSX文件（不知道的請百度），有點意思，看看介紹怎麼說。

加載器是預處理器，它能夠在Webpack的構建過程以前轉換你的應用程序的資源文件(更多信息)。

例如,Babel-loader能夠JSX / ES6文件轉換成標準JS文件,以後Webpack將開始構建這些JS文件。Webpack的官方文檔有一個完整的加載器列表。

main.jsx 是一個JSX文件。

先來看幾個文件的內容代碼：

 

demo03-2

 

demo03-3

 

demo03-4

上面的代碼片斷使用了Babel-loader加載器，它須要Babel的預設插件Babel -preset-es2015和Babel -preset-react 轉換編譯es2015和react。

圖2這是react 的寫法，先引入須要的react和react-dom，而後在render中把指定的內容，顯示在ID爲wrapper的控件上。

Demo04: CSS-loader 

Webpack容許你在JS文件中包含CSS，而後用CSS-loader來預處理CSS文件。

main.js只有一句話

require('./app.css');

app.css

body {

background-color:blue;

}

 

demo04-1

 

demo04-2

注意，您必須使用兩個加載器來轉換CSS文件。首先是CSS-loader來讀取CSS文件，另外一個是樣式加載器將<style>標籤插入HTML中。

運行，npm run dev，一切正常。

不過我想改寫一下，想把main.js改寫成一個JSX文件。一塊兒來試試。

1. 首先改造html，加個帶命名ID的控件div。

2. 寫個JSX文件，如圖main1.jsx。

3. 修改webpack配置文件，添加對應的module.rules。依次以下方圖：

 

 

demo04-03

 

demo04-04

 

demo04-05

注意幾點：

1. 在html中，若是bundle.js在控件以前引入，會不顯示內容。位置不可引錯。緣由是由於給控件賦值操做實際上是編譯在bundle.js裏面的，所以必須放置控件以後。

2. 在JSX文件中的寫法不一樣於demo03的寫法，要注意。

做者：陳大沖 連接：https://www.jianshu.com/p/080e18fcf0e3 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。