Webpack4+React+Typescript搭建開發環境

時間 2019-11-10

標籤 webpack4+react+typescript webpack react typescript 搭建開發環境欄目 React 简体版

原文原文鏈接

2018.10.27補充
1.新增url-loader，解決引用背景圖片時產生的bug，css

img片404解決：如<img src={require('../../images/avaters/avatar.jpg')} />

············································································
1.先看下目錄結構html

2.首先，初始化package.json,運行npm init，這個不用多說node

3.在根目錄新建webpack.config.js文件
//建立基本的出入口react

modules.exports = {
    //模式:開發模式
    mode:"development"
    entry: path.join(__dirname, './src/index'), //入口
    output: { //出口
        filename: '[hash].bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    module:{
    
    }
}

接下來配置webpack的模塊module,這些選項決定了如何處理項目中的不一樣類型的模塊。
重點配置一下module.rules選項，這個可以對模塊(module)應用 loader，或者修改解析器(parser)。
module.rules是個數組webpack

modules.exports = {
    module:{
        rules:[
        //ts-loader 用來解析ts文件
        //須要安裝如下依賴
        //npm install ts-loader --save-dev
        //npm install typescript --save-dev
        //安裝react相關依賴
        //npm install --save-dev react react-dom @types/react @types/react-dom
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,//不解析node_modules
                loader: 'ts-loader'
            },
            //加載json，png等文件
            //安裝npm install --save-dev file-loader
            {
               test: /\.[(png)|(obj)|(json)]$/,
               loader: "file-loader" 
            },
            //加載css
            //安裝npm install --save-dev css-loader
            //npm install style-loader --save-dev
            {
               test: /\.css$/,
               use: ['style-loader', 'css-loader']
            },
        ]
    }
}

若是須要使用.less,或者在家字體文件，配置相關的loader，每一個loader都有豐富的配置選項，能夠研究一下按需配置

接着是resolve選項，這些選項能設置模塊如何被解析。
方便的好比alias選項，它能夠該import，require設置別名，應用官網例子以下

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

如今，替換「在導入時使用相對路徑」這種方式，就像這樣：es6

import Utility from '../../utilities/utility';
修改成別名
import Utility from 'Utilities/utility';

最關鍵的我以爲仍是extensions 選項,自動解析肯定的擴展web

modules.exports={
    resolve: {
        //下面後綴的文件導入時能夠省略文件名，js必需要有，不然會react.js文件會沒法被解析
        extensions: [".ts", ".tsx", ".js"]
     },
     devtool: 'source-map', //調試工具，不一樣模式構建速度不一樣，source-map適合生存環境，開發環境用eval-source-map
     //安裝依賴
     //npm install --save-dev webpack-dev-server
      devServer: {
          //告訴服務器從哪一個目錄中提供內容。只有在你想要提供靜態文件時才須要
        contentBase: path.resolve(__dirname, "dist"),
        compress:true, //是否壓縮
        port:8080, //端口號
        host:'0.0.0.0', //外部服務器能夠訪問
        open:true //是否運行時打開瀏覽器
      },
      plugins: [
       //該插件將爲你生成一個HTML5文件，其中包括使用script標籤的body中的全部webpack包
       //安裝npm install --save-dev html-webpack-plugin
        new HtmlWebpackPlugin({
          title: '標題',//用於生成的HTML文檔的標題
          template: './index.html', //默認index.html位置
        })
  ]
}

package.json相關配置

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

tsconfig.json配置typescript

{
  "compilerOptions": {
    "jsx": "react",
    "lib": ["es6", "dom"],
    "rootDir": "src",
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "./src"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

index.htmlnpm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>哈哈</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

index.tsxjson

import * as React from "react"
import * as ReactDOM from "react-dom"


ReactDOM.render(
  <div>Hello World</div>,
  document.getElementById("app")
)

運行npm run dev便可運行，默認打開localhost：8080;

以上是開發環境教程，其中還有更加豐富的功能插件和配置須要按需添加配置
網站的webapack代碼以下

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index'),
  output: {
    filename: '[hash].bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          experimentalWatchApi: true,
        }
      },
      {
        test: /\.[(png)|(obj)|(json)]$/,
        loader: "file-loader"
      },
      //樣式加載 css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //解析url
       {
        test: /\.(woff|woff2|jpg|png)$/,
        use: {
            loader: 'url-loader',
            options: {
                name: 'imanges/[hash].[ext]',
                limit: 5000,
                mimetype: 'application/font-woff'
            }
        },
      //樣式加載 less
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        },
        { loader: 'css-loader', options: { sourceMap: false } },
        {
          loader: "less-loader",
          options: {
            strictMath: true,
            noIeCompat: true
          }
        }
        ]
      },
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    compress:true,
    port:8080,
    host:'0.0.0.0'
  },
  plugins: [
    // new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Zoe',
      template: './index.html',
    })
  ]
};

附：接下來將發佈怎麼搭建我的網站。。。。