1.webpack基礎配置與loader的基礎應用

寫在開頭

該系列文章主要是本人在學習慕課網React全棧課程中的一些記錄和分享。該課程主要是利用React構建cnode網站，接口由cnode官方提供。因爲課程中的webpack，babel版本較老，本次分享均是用的webpack4和Babel7。本系列文章重點不是React，主要是分享前端工程化的構建和服務端渲染（SSR）。

本次分享的代碼將會放到個人github上面。

工程初始化和webpack基礎配置

新建項目文件夾，在cmd窗口中運行npm init,輸入一些配置項後便可生成一個npm項目。運行git init,對該項目進行git版本管理。在項目中新建build和client文件夾，build文件夾存放webpack配置文件，client文件夾存放客戶端的開發文件。

首先安裝基礎的依賴React和Webpack。

npm i react -S   
npm i webpack -D   // -D爲開發依賴
npm i webpack-cli -D  // webpack4，須要安裝cli依賴

新建一些文件

• build/webpack.config.js // webpack配置文件
• client/app.js // 項目的入口文件
• client/App.jsx // react入口文件

webpack基礎配置，詳細配置可參照官網

const path = require('path')  // path包解決不一樣操做系統中路徑不一致問題

function resolvePath(filePath) {
  return path.join(__dirname, filePath);
}

module.exports = {
  mode: 'development', // 開發模式或生產模式
  // 入口文件，webpack編譯的入口
  entry: {
    app: resolvePath('../client/app.js')
  },
  // 打包後文件的輸出地址
  output: {
    filename: '[name].[hash].js', //name和hash是其中的兩個變量
    path: resolvePath('../dist'), // 打包後文件的位置
    publicPath: '' //
  }
}

webpack基本配置完成了，在package.json中的scripts中增長一個build命令

"scripts": {
    "build": "webpack --config build/webpack.config.js"
  },

在app.js中隨便寫一點內容，在cmd中運行npm run build,在當前文件夾下會生成一個dist目錄，該目錄下即爲經webpack編譯後的文件。該部分代碼位於倉庫的2-3分支下

若是初始化git後，在項目下添加 .gitignore 文件，用來配置不須要版本管理的文件夾或文件，如node_modules等

babel-loader及babel的配置

因爲在項目中用到ES6和jsx語法，全部須要用babel先編譯。babel-loader也是react官方的編譯器。咱們如今app和App文件中寫一些簡單的內容。

App.jsx
    import React from 'react'
    // 一個簡單的react組件
    export default class App extends React.Component {
      render() {
        return (
          <div>This is app</div>
        )
      }
    }
app.js
    //將App.jsx中的組件掛載到body上（僅做演示，不建議掛載到body上）
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    import App from './App'
    
    ReactDOM.render(<App />, document.body)

配置webpack中的loader，loader主要是轉換代碼的做用，如將jsx代碼轉爲js代碼。咱們須要安裝babel-loader，@babel/core和@babel/preset-react三個依賴，均用-D安裝。

resolve: {
    extensions: ['.js','.jsx']  // 默認文件後綴。在app.js中，直接引入App，而不是App.jsx。全部的js和jsx文件在引入時都可省略後綴
  },
  // 配置loader
  module: {
    rules: [
      {
        test: /.jsx$/,  // 正則，處理以.jsx結尾的文件
        loader: 'babel-loader'  // 使用的loader
      },
      {
        test: /js$/, // 主要是將ES6或更高級別的沒法轉爲ES5版本
        loader: 'babel-loader',
        exclude: [
          resolvePath('../node_modules') // 忽略node_modules中的文件
        ]
      }
    ]
  },

配置完webpack後，babel尚未生效。須要在項目中新建一個.babelrc文件，配置項以下。

// babel7的配置比較簡潔，直接使用官方的preset-react便可。
{
  "presets": ["@babel/preset-react"]
}

運行npm run build命令，新生成的js文件就會包含react相關的代碼了。

目前生成的文件均爲js文件，並無html文件的生成。咱們之須要安裝html-webpack-plugin，而後再webpack中配置便可

const HTMLPlugin = require('html-webpack-plugin')

modeule.exports = {
    //.........
   plugins: [
    new HTMLPlugin()
  ]
}

再次運行build命令後，會再dist目錄下生成一個index.html文件，打開便可看見咱們再App.jsx中的內容。該部分代碼位於倉庫的2-4分支下