WEBPACK4.X 版本 BABEL7.X 版本配置react

最新推荐文章于 2024-03-08 10:51:26 发布

原创最新推荐文章于 2024-03-08 10:51:26 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

webpack 同时被 2 个专栏收录

3 篇文章

订阅专栏

babel

2 篇文章

订阅专栏

本文介绍了如何配置WEBPACK4.x和BABEL7.x来搭建React开发环境，包括package.json, .babelrc和webpack.config.js的设置，以及dev-server的使用，确保实现热模块替换功能。" 90052347,8345490,使用pipenv创建和管理虚拟环境,"['Python开发', 'pipenv', '虚拟环境管理', 'Ubuntu', 'Python升级']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package.json

{
  "name": "webpack-skeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --config webpack.config.build.js --progress",
    "watch": "webpack --watch --mode=production",
    "start": "webpack-dev-server --open --mode=production",
    "devserver": "node dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "antd": "^3.10.8",
    "jquery": "^3.3.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }
}

.babelrc

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

webpack.config.js

const path = require('path');
//处理模板html自动引入JS
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin');
//js压缩插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  mode: "development",
  entry: {
    entryA: path.resolve(__dirname, "src/a/a.js")
  },
  output: {
    filename: './js/[name].[hash:8].bundle.js',//名字已入口entry 名字命名
    path: path.resolve(__dirname, 'dist')//输出文件的路径
  },
  module: {
    rules: [
      { test:/\.(js|jsx)?$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /\.css$/,
        use: [
           'style-loader',
            'css-loader'
              ]
          }
    ]
  },
  
  //输出源码
  devtool: 'source-map',

  /**
   * 一些优化配置
   */
  optimization: {
    //压缩js
    // minimizer: [
    //   new UglifyJsPlugin()
    // ],
    //抽离公用的js部分 , 配置自动提取node_modules里用到的模块如jquery
    splitChunks: {
      cacheGroups: {
        vendor: {
          // test: /\.js$/,
          test: /[\\/]node_modules[\\/]/,
          chunks: "initial", //表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
          name: "vendor", //拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
          enforce: true,
        },
       
      }
    }
  },
  resolve: {
    extensions: ['.js','.jsx']
  },
  plugins: [
    //清除文件
    new CleanWebpackPlugin(['dist']),
    //设置默认环境变量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      LOCAL_ROOT: JSON.stringify("http://ziksang.com")
    }),
    /**
     * chunks 代码块,vendor 为固定静态资源splitChunks配置,各个模板的入口 对应entry入口模块
     */
    new HtmlWebpackPlugin({
      filename: 'entryA.html',
      template: 'src/a/a.ejs',
      inject: true
    }),
    //配合devServer 实现热更新
    new webpack.HotModuleReplacementPlugin()
  ]
};

dev-server

官方使用地址：https://webpack.js.org/guides/hot-module-replacement/#via-the-node-js-api

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.config.js');
const options = {
  contentBase: './dist',//配置根路径
  hot: true,//是否开启热更新
  host: 'localhost'
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
//启动端口
server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});