webpack入門筆記（二）

使用webpack構建真實的react工程

進入項目文件夾,初始化項目

cd reaact-demo
npm init -y

安裝依賴

安裝react

npm install react react-dom
此時package.json中應該有react和react-dom

安裝webpack

-d表明安裝在開發環境中
npm install webpack webpack-cli -d

此時webpack會被安裝在node_modules中
直接執行webpack會報錯,須要進入node_modules文件夾中找到webpack才能夠執行
也能夠的經過-g的方式全局安裝webpack

npm install webpack webpack-cli -g
webpack -v
出現版本號即爲安裝成功

初始化項目文件內容

新建src文件夾，模擬App.jsx，index.html，index.jsx子文件

<!-- index.html -->
  <div id="app"></div>

import App from './App.jsx'

// App.jsx
  import React from 'react'
  import ReactDom from 'react-dom'

  const App = () => {
    return (
      <div>
        <h1>webpack測試</h1>
      </div>
    )
  }

  export default App
  ReactDom.render(<App/>, document.getElementById('app'))

經過webpack使用babel編譯項目文件

簡單地使用babel編譯一個文件

安裝babel

npm install @babel/core @babel/cli -d

安裝babel編譯規則

npm install @babel/preset-env

運行babel，編譯文件，測試將ES6編譯爲ES5

// test.js
[1,2,3].map((item)  => {
  console.log(item)
})

運行babel命令

babel test.js --presets=@babel/preset-env
<!-- 輸出結果 -->
"use strict"
[1, 2, 3].map(function (item) {
  console.log(item)
})
ES6已經轉化爲了ES5

配置babel的方法

能夠在package.json裏直接對babel進行配置
也能夠在根目錄新建一個.babelrc的文件
.babelrc的優先級最高，babel在編譯的時候會優先查找.babelrc文件
配置內容的寫法相同 都是json格式

// package.json or .babelrc
{
  "babel": {
    "presets": ["@babel/presets-env"]
    // 規則： [規則內容]
    // 指定babel編譯規則
  }
}

在webpack中將babel做爲laoder使用

安裝須要的依賴和規則

npm install babel-loader
npm install @babel/preset-env @babel/preset-react
npm install html-webpack-plugin -d

const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  // 規定webpack讀取文件時的後綴
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.jsx', '.json']
  },
  // 入口文件
  entry: path.resolve(__dirname, 'src/index.jsx'),
  // 編譯文件
  module: {
    rules: [
      {
        // 使用正則匹配js或jsx文件
        test : /\.jsx?/,
        // 排除node_modules文件夾
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            // 不經過babelrc
            babelrc: false,
            // 規則
            presets: [
              // 轉義jsx
              require.resolve('@babel/preset-react'),
              // 轉義ES6
              // modules表明模塊化方案的指定，是否把import做爲模塊編譯
              [require.resolve('@babel/preset-env', { modules: false })]
            ],
            // 是否將編譯內容緩存
            cacheDirectory: true
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      filename: 'index.html'
    })
  ]
}

開始打包文件

webpack --mode development
開發環境下