webpack4设置React项目

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文件

image.png

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

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

{
  "presets": ["env", "react"]
}

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文件内容



    
    


    

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

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

9、安装html-webpack-plugin插件对html进行打包

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

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

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            }
        ]
    },
    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: require('path').join(__dirname, "dist"),
        compress: true,
        port: 8088,
        host: "localhost",
    }

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