使用webpack搭建react項目 webpack-react-project

時間 2019-11-11

標籤使用 webpack 搭建 react 項目 project 欄目 React 简体版

原文原文鏈接

webpack-react-project 使用webpack搭建react項目

webpack搭建react項目 github源碼
具體配置信息參照package.json和webpack.config.jscss

首先建立一個項目文件夾,並進入到該文件夾：html
mkdir react-webpack-project
初始化項目：npm init 根據提示建立package.json
經過NPM安裝webpack和webpack-cli,其中-D至關於--save-dev: npm install webpack webpack-cli -D，安裝完成後可在package.json中查看具體的安裝版本信息：
webpack4 以上的版本，會默認配置,好比默認的入口文件，默認的輸出文件，所以暫時無需額外的配置
在根目錄下新建src文件夾，並在其中建立index.js文件，在文件中寫入console.log('hello react');
6.直接經過npm run dev

package.json 中scripts中配置
node

"scripts": {
     "dev": "webpack --mode development",
     "build": "webpack --mode production"
 }

npm run dev,成功打包後，發現項目裏多了一個dist文件夾，可經過npm run dev/npm run build分別打包對比生成的main.js的文件大小，npm run build,你會發現main.js文件小了不少
配置babel編譯es6的代碼，在根目錄下新建.babelrc文件，並寫入如下代碼：react
```
{
     "presets": [
         "env"
     ]
 }
```
9.經過npm安裝babel
npm install babel-core babel-loader babel-preset-env --save-dev
爲方便管理，將webpack.config.js單首創建，與package.json分開，在根目錄下建立webpack.config.js文件，寫入以下代碼：

// webpack v4
    const path = require('path');
    module.exports = {
    entry: { main: './src/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
            loader: "babel-loader"
            }
        }
        ]
    }
    };

經過npm run dev發現babel版本太低報錯，所以將babel版本升級，安裝完成後npm run dev能進行正常打包webpack
npm i babel-loader@7.1.5 -D
在dist文件夾下新建index.html文件，並寫入如下內容，其中引用了css文件git

Hello, world!
在src文件下新建style.css,寫入任意css表達式，並將其引用至index.js中,再次經過npm run dev出現報錯，提示「You may need an appropriate loader to handle this file type」，須要安裝配置css-loaderes6

div{background-color:red};github
import "./style.css";
console.log("hello, world");
經過npm下載css-loader和style-loader:web

npm install css-loader style-loader -D
另外還需安裝extract-text-webpack-plugin插件(經過@next安裝新版本，低版本在webpack4上沒法正常運行):npm
```
npm install --save-dev extract-text-webpack-plugin@next
```
安裝完成後對webpack.config.js進行配置,在rules中添加css-loader配置，引入extract-text-webpack-plugin並配置plugins，配置完成後經過npm run dev可正常進行編譯
```
const ExtractTextPlugin = require('extract-text-webpack-plugin');

{
test: /\.css$/,
use: ExtractTextPlugin.extract(
  {
    fallback: 'style-loader',
    use: ['css-loader']
  })
}

plugins:[
new ExtractTextPlugin("styles.css")
]
```

在src下新建index.html文件：

<html>
    <head>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div>Hello, world!</div>
    <script src="main.js"></script>
    </body>
</html>

安裝html-webpack-plugin插件，並進行相應的配置：

npm install extract-text-webpack-plugin -D
webpack.config.js中的配置信息以下：

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    plugins:[ 
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        })
    ]

基本配置已完成，可將dist文件夾下的內容刪除後，運行npm run dev進行編譯。詳細配置參照package.json及webpack.config.js文件。
經過配置webpack-dev-server開啓web服務器,經過npm安裝webpack-dev-server:

npm install webpack-dev-server -D
安裝完成後，在webpack.config.js中配置devServer:
```
devServer:{
contentBase:path.resolve(__dirname,'dist'),
publicPath:'/',
port:8080,
historyApiFallback:true
}
```
最後，在package.json的scripts腳本中寫入: