Webpack4.x+Babel7.x+React16.x平台搭建

Basic-demo

Webpack4.x+Babel7.x+React16.x平台搭建

本文代码Github地址

项目初始化

通过npm init初始化项目，一路yes，生成package.json文件

安装webpack4

npm i -g webpack webpack-cli
npm i -D webpack webpack-cli

安装babel7

• 全局安装@babel/cli @babel/core，安装后可检查babel版本

npm i -g @babel/cli @babel/core
babel -V //7.4.4 (@babel/core 7.4.5)

• 项目安装@babel/core @babel/preset-env @babel/preset-react，同时安装@babel/polyfill

npm i -D @babel/core @babel/preset-env @babel/preset-react
npm i -S @babel/polyfill

安装webpack各种常用加载器、插件和工具

npm i -D clean-webpack-plugin html-webpack-plugin
npm i -D file-loader url-loader style-loader css-loader babel-loader
npm i -D webpack-dev-server webpack-merge

安装React依赖

npm i -S react react-dom react-router-dom

新建配置文件和项目目录

• 在根目录下新建config目录，新建如下三个配置文件：

  • webpack.base.conf.js为公用配置

  //webpack.base.conf.js
  'use strict'
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    // 入口起点
    entry: {
      app: './src/index.js',
    },
    // 输出
    output: {
      path: path.resolve(__dirname, '../dist'),
      filename: "[name].js",
    },
    // 解析
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.json','.jsx']
    },
    // loader
    module: {
      rules: [
        {
          test: /\.js|jsx$/,
          exclude: /node_modules/,// 屏蔽不需要处理的文件（文件夹）（可选）
          loader: 'babel-loader'
        },
        {
          test: /\.css$/,
          use: ['style-loader','css-loader']
        }
      ]
    },
    // 插件
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: 'body'
      })
    ]
  }
  

  • webpack.dev.conf.js为开发环境配置，继承自webpack.base.conf.js

  //webpack.dev.conf.js
  'use strict'
  const merge = require('webpack-merge');
  const baseWebpackConfig = require('./webpack.base.conf');
  
  const path = require('path');
  const webpack = require('webpack');
  
  module.exports = merge(baseWebpackConfig, {
    // 模式
    mode: "development",
    // 调试工具
    devtool: 'inline-source-map',
    // 开发服务器
    devServer: {
      contentBase: false,// 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录
      historyApiFallback: true,// 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
      compress: true,// 启用gzip压缩
      inline: true,// 设置为true，当源文件改变时会自动刷新页面
      hot: true,// 模块热更新，取决于HotModuleReplacementPlugin
      host: '127.0.0.1',// 设置默认监听域名，如果省略，默认为“localhost”
      port: 8703// 设置默认监听端口，如果省略，默认为“8080”
    },
    // 插件
    plugins: [
      // 热更新相关
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
      nodeEnv: 'development',
    }
  });
  

  • webpack.prod.conf.js为生产环境配置，继承自webpack.base.conf.js

  //webpack.prod.conf.js
  'use strict'
  const merge = require('webpack-merge');
  const baseWebpackConfig = require('./webpack.base.conf');
  
  const path = require('path');
  const webpack = require('webpack');
  // 注意：此插件3.0版本引用时候需要大括号，2.0版本则不用
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  module.exports = merge(baseWebpackConfig, {
    // 模式
    mode: "production",
    // 调试工具
    devtool: '#source-map',
    // 输出
    output: {
      path: path.resolve(__dirname, '../dist'),
      filename: "js/[name].[chunkhash].js",
    },
    // 插件
    plugins: [
      new CleanWebpackPlugin(),
      new webpack.HashedModuleIdsPlugin(),
    ],
    // 代码分离相关
    optimization: {
      nodeEnv: 'production',
      runtimeChunk: {
        name: 'manifest'
      },
      splitChunks: {
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        name: false,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'initial',
          }
        }
      }
    }
  });
  

• 在根目录下新建src目录，并新建如下两个文件，写个hello world页面

  • index.js为项目入口文件，负责挂载react组件到
    上

  //index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App.js';
  
  ReactDOM.render(, document.getElementById('app'));
  

  • App.js为React项目根组件

  //App.js
  import React from 'react';
  
  export default class App extends React.Component{
      render(){
          return (
              
  Hello World!
          )
      }
  };
  

• 在根目录下创建模板HTML页面index.html

• 配置package.json的scripts属性

"scripts": {
  "dev": "webpack-dev-server --hot --inline --progress --colors --config config/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "webpack --progress --colors --config config/webpack.prod.conf.js"
}

• 根目录下新建并配置.babelrc文件

{
    "presets": [
        [
            "@babel/preset-env",
            {
              "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "67",
                "safari": "11.1",
                "ie": "11",
              }
            },
          ],
          "@babel/preset-react"
    ],
    "plugins": []
}

测试效果

npm start         \\测试开发模式
npm run build     \\测试生产模式