webpack搭建react开发环境流程

webpack搭建react开发环境流程

1. 初始化项目 yarn init
2. 安装webpack yarn add webpack --dev
3. 创建webpack.config.js 文件
4. 将webpack官网的入口entry粘贴进配置文件
5. 创建src目录，新建app.js入口文件
6. 执行.\node_modules\.bin\webpack 会将app.js文件打包到dist目录下。

需要安装的包：
1. 打包Html文件,使用HtmlWebpackPlugin，（因为默认的index.html文件缺少一些配置，可以自定义模板，参考HtmlWebpackPlugin配置文档）
2. 支持es6语法和react，使用babel，
3. 需要安装react开发必须依赖，安装react和react-dom
4. 打包css文件，使用css-loader style-loader
5. 支将css文件打包成单独文件，使用ExtractTextWebpackPlugin
6. 支持scss格式的样式，使用sass loader、node-sass
7. 支持加载图片，使用file loader，我们使用file loader 的封装 url loader
8. 引入字体文件，使用font-awesome
9. webpack实时加载，使用 webpack-dev-server
10. 在package.json中添加scripts简化命令

 

详细命令：
1. Yarn add html-webpack-plugin --dev
2. yarn add babel-loader @babel/core @babel/preset-env  @babel/preset-react --dev
3. yarn add react react-dom
4. yarn add css-loader style-loader --dev
5. yarn add extract-text-webpack-plugin@next --dev
6. Yarn add sass-loader node-sass  --dev
7. Yarn add file-loader url-loader --dev
8. 直接在html文件header中引入 <link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
9. Yarn add webpack-dev-server --dev
10. 命令如下：配置完后就可以直接执行yarn run dev (运行编译打包实时更新)、yarn run dist（手动打包），就不用那么打一大串那么麻烦了。

"scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "dist": "node_modules/.bin/webpack -p"
  },

 

配置完成后最终的webpack.config.js 文件

const path = require('path');
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './src/app.js',                      // entry    : 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),    // path     : 打包输出到哪儿？
    filename: 'js/app.js'                        // filename ：打包后的文件名
  },
  module: {
    // react文件的处理及打包
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'] // jsx转为js函数
          }
        }
      },
      // css文件的处理
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      // sass文件的处理
      {
        test: /\.scss$/,
        use: [
          "style-loader", // 将 JS 字符串生成为 style 节点
          "css-loader", // 将 CSS 转化成 CommonJS 模块
          "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
        ]
      },
      // 图片的配置
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,   //文件大于8K的时候，单独将图片打包成文件。
              name: 'resource/[name].[ext]'
            },
          },
        ],
      },
      //字体图标的配置
      {
        test: /\.(woff|woff2|svg|eot|ttf|otf)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,   //文件大于8K的时候，单独将图片打包成文件。
              name: 'resource/[name].[ext]'
            },
          }
        ]
      },
    ]
  },
  // 配置webpack实时重新加载
  devServer: {
    contentBase: './dist',
    port: 8086   //启动端口，默认8080，最好修改一下。以防占用其他软件端口
  },
  plugins: [
    // 处理html文件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 处理独立css文件
    new ExtractTextPlugin("css/[name].css"),
  ],
  // 处理通用模块
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2
        }
      }
    }
  },
};