【转--并修正完善】webpack4设置React项目

修改了原文部分配置，以及配置后可能出现的错误解决方法：

a、webpack.config.js配置入口文件（entry）和出口文件（output），webpack4可以不配置，如果报错Entrypoint undefined = index.html可以尝试。

b、报错：Error: Cannot find module '@babel/core'，解决方法，重新安装低版本babel-loader

npm uninstall babel-loader
npm install [email protected]

转：https://www.jianshu.com/p/cb2e63bc1705

---

1、新建项目文件my-react-app，初始化项目

 mkdir my-react-app    //新建项目文件
 cd my-react-app    //进入项目根目录
 npm init -y    //初始化项目，快速构建package.json文件

2、本地安装webpack及其命令行接口

//-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面
npm install -D webpack webpack-cli

3、webpack4入口文件为./src/index.js，所以新建src文件夹下的index.js文件

4、修改package.json文件的scripts字段

"scripts": {
  "dev":"webpack --mode development",//开发模式，对打包文件不压缩
  "build":"webpack --mode production"//压缩打包文件
},

执行npm run dev 或者npm run build，会多出./disk/main.js文件，这个文件是webpack对./src/index.js的打包结果

5、安装React

npm install -D react react-dom

6、安装javascript编译器babel

npm install -D babel-core babel-polyfill babel-loader babel-preset-env babel-preset-react
npm install -D babel-preset-es2015 babel-preset-stage-0  //新增，支持es2015

新建.babelrc文件，进行相关配置如下：

{
  "presets": ["env","react","es2015","stage-0"]
}

7、配置webpack文件，新建webpack.config.js文件，进行相关配置

module.exports= {
  module: {        
    rules: [            
      {                
        test: /\.js$/,                
        exclude: /node_modules/,                
        use: {                    
          loader:"babel-loader"
        }            
      }        
    ]    
  }
};

8、新建public文件夹下的index.html文件，并修改./src/index.js文件

//index.html文件内容Title



    
    


    

//index.js文件内容
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    
这里是一个简单的示例页面
,
    document.getElementById('root')
);

9、安装html-webpack-plugin插件对html进行打包；安装css-loader style-loader，css-loader使你能够使用类似@import和url（...）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。

npm install -D html-webpack-plugin html-loader
npm install -D css-loader style-loader

10、修改webpack.config.js配置文件

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
        })
    ]
};

执行npm run dev 或者npm run build，会多出./disk/index.html文件

11、安装webpack-dev-server搭建服务器

npm install -D webpack-dev-server

修改package.json文件的scripts

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

修改webpack.config.js文件，新增devServer配置

devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8088,
        host: "localhost",
    }

执行npm start，则可以启动服务，项目搭建完成。http://localhost:8088/