webpack3最新版本配置研究（一）loader

阿新 • • 發佈：2019-02-11

webpack這貨還是挺火的,目前前端不管是react和vue都用這個打包,還是挺好用的，本文剛開始寫的是webpack2，但後來發現webpack3可以無傷升級就升級了下，據說webpack3相對於2的生成的程式碼執行速度更快！在家裡裝了個最新版本的nodejs8.4.0，附帶的npm是5.3.0的，有的時候install的時候會爆Cannot read property ‘0’ of undefined，目前的辦法是npm install -g [email protected]退級，或者安裝nodejs6的穩定版，之後可能會處理這個bug

什麼是Webpack

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

WebPack和Grunt以及Gulp相比有什麼特性

其實Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模組化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。

webpack的安裝和其他的npm包類似

npm init  //一路回車,這裡要注意name最好不要取什麼webpack，grunt，glup之類的，不然可能會爆refusing to install xxxx as a dependency of itself

//全域性安裝
npm install -g webpack
//安裝到你的專案目錄，最好制定一個版本號 

npm install --save-dev [email protected]3.4.0

首先是最簡單的webpack打包

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
  <div id="parent">

  </div>
</body>
<script src 
="bundle.js"></script>
</html>

//index.js
const divItem = require('./div');
document.getElementById('parent').appendChild(divItem());

//div.js
module.exports = () => {
    const divDom = document.createElement('div');
    divDom.textContent = 'write something';
    return divDom;
}

//webpack.config.js
module.exports = {
  // 打包檔案的存放地址
  entry: __dirname + "/index.js",
  output:{
    // 打包後存放地址
    path: __dirname,
    // 輸出後的檔名
    filename: 'bundle.js'
  }
}

//package.json中將scripts修改，npm run webpack命令會呼叫webpack命令列
"scripts": {
  "webpack":"webpack"
}

然後在當前資料夾使用命令列輸入npm run webpack 就可以將index的檔案和他的require全都打到bundle中了，首先先執行了npm中的script呼叫了webpack命令，webpack命令直接執行了webpack.config.js中的配置，將index.js打包到bundle檔案裡引入

Loader
webpack通過呼叫外部的指令碼可以對各種檔案進行處理，把下一代的ES6，ES7轉換為ES5。或者說對React的開發而言，可以把React的JSX檔案轉換為JS檔案。也可以將css打包到js中，例如style和css的loader，在webpack1中loader在module中是用loaders欄位的，在webpack2中使用的是rules欄位

babel
babel是loader中比較重要的，用來將es6和es7轉換成es5來進行瀏覽器的展示，用下列命令安裝它們
npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

module: {
  rules: [
    {
        test: /\.js|jsx$/, //是一個正則，代表js或者jsx字尾的檔案要使用下面的loader
        loader: "babel-loader"
    }
  ]
}

//建立一個.babelrc,webpack中的babel會自動呼叫該檔案的配置到babel中轉換js
{
  "presets": ["react", "es2015"]
}

這時再執行下npm run webpack之後，發現之前index和div中的const寫法被轉換成es5的var了

cssloader
用來解析js中引入的css和sass，老規矩
npm install –save-dev style-loader css-loader

//webpack.config.js中修改module
module: {
    rules: [
      {
        test: /\.js|jsx$/, //是一個正則，代表js或者jsx字尾的檔案要使用下面的loader
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"//新增對樣式表的處理
      }
    ]
 }


//生成一個index.css檔案來新增一些樣式
#parent{
  color: red;
}


//index.js中新增樣式
require('./index.css');

執行npm run webpack之後開啟index.html是不是字型變紅了呢？

webpack3最新版本配置研究（一）loader

什麼是Webpack

WebPack和Grunt以及Gulp相比有什麼特性

webpack3最新版本配置研究（一）loader

[轉] webpack3最新版本配置研究（五） devtool，webpack-dev-server，CommonsChunkPlugin

linux 配置文件.conf 非打印字符出錯的研究（一）

Spring 事務配置實戰（一）：過濾無需事務處理的查詢之類操作

（轉）Redis研究（一）—簡介

SGI STL內存配置器（一）：內存泄漏？

hibernate框架在eclipse下的配置方法（一）

Linux系統集群架構線上項目配置實戰（一）

CentOS7上安裝配置GitLab（一）

cloudfoundry研究（一） ---- BOSH與monit

安卓 dex 通用脫殼技術研究（一）

Alpha版本沖刺（一）

Elam的caffe筆記之配置篇（一）：CentOS6.5編譯安裝gcc4.8.2

RabbitMQ研究（一）

Jenkins持續整合介紹及外掛安裝版本更新演示（一）--技術流ken

Linux —mysql資料庫配置服務（一）

軟件安裝配置筆記（一）——oracle的安裝與配置

軟體安裝配置筆記（一）——oracle的安裝與配置

IDEA 2018.1.5版本配置 Subversion（SVN）

mybatis 解析配置檔案（一）之XML的DOM解析方式

webpack3最新版本配置研究（一）loader

什麼是Webpack

WebPack和Grunt以及Gulp相比有什麼特性

相關推薦