webpack5初始化react工程化项目

学习使用webpack构建react项目

1，创建文件夹，npm init -y ，生成package.json 文件

2，创建public文件夹-index.html、src文件夹-index.js、webpack文件夹-webpack.config.js

3，安装 yarn add webpack webpack-cli html-webpack-plugin -D

4，配置webpackconfigjs

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

//相对路径转为绝对路径
const resolvePath = _path => path.resolve(__dirname,_path);

module.exports={
    mode:'development',
    entry:resolvePath('../src/index.js'),
    output:{
        path:resolvePath('../dist'),
        filename:'[name].bundle.js'
    },
    plugins: [new HtmlWebpackPlugin({
        path:resolvePath('../public/index.html'),
        filename:'index.html',
        title:'reactApp'
    })],

}

5，配置script 尝试打包 yarn build 便可以打包到目录下dist，完成打包过程的配置。

 "scripts": {
 "test": "echo "Error: no test specified" && exit 1",
 "build":"webpack --config ./webpack/webpack.config.js"
  },

6，完成react项目的启动搭建，首先引入各种需要的loader（比如css\less，），plugins,并导入

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const {
 CleanWebpackPlugin
} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//相对路径转为绝对路径
const resolvePath = _path => path.resolve(__dirname, _path);

const baseConfig = {
    entry: resolvePath('../src/index.js'),
    output: {
        path: resolvePath('../dist'),
        filename: '[name].bundle.js'
    },
    plugins: [new HtmlWebpackPlugin({
        template: resolvePath('../public/index.html'),
        filename: 'index.html',
        title: 'reactApp'
    }), new MiniCssExtractPlugin({
        filename: '[name].[hash:8].css'
    }), new CleanWebpackPlugin()],
    optimization: {
        minimizer: [
 // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
 // `...`,
 new CssMinimizerPlugin(),
        ],
      },
    module: {
        rules: [{
            test: /.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
        }, {
            test: /.less$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
        },{
            test:/.(js|jsx)$/,
            use:'babel-loader'
        },{
            test:/.svg$/,
            type:'asset/resource'
        }]
    }

}

module.exports ={
 resolvePath,
 baseConfig
}

7 ，创建生产模式、开发模式的webpack.config.js ，使用merge合并

//dev
const {
 merge
} = require('webpack-merge');
const {
 baseConfig,
 resolvePath
} =require('./webpack.base.conf');

module.exports=merge(baseConfig,{
    mode:'development',
    devtool:'inline-source-map',
    devServer: {
        compress: true,
        port: 9000,
        host:'0.0.0.0',
        hot:true,
        open:true
      },
})


//pro
const {
 merge
} = require('webpack-merge');
const {
 baseConfig,
 resolvePath
} =require('./webpack.base.conf');

module.exports=merge(baseConfig,{
    mode:'production',
    devtool:'inline-source-map'
})

8，安装babel，并配置babel.config.json

{
 "presets": ["@babel/preset-react","@babel/preset-env"]
  }

9. 安装 webpack-dev-server, 搭建本地启动环境

"scripts": {
 "test": "echo "Error: no test specified" && exit 1",
 "build": "webpack --config ./webpack/webpack.prod.conf.js",
 "serve": "webpack-dev-server --config ./webpack/webpack.dev.conf.js"
  },