使用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脚本中写入:

"start": "webpack-dev-server --config webpack.config.js" 如今，就能够经过npm run start命令启动项目啦～～～