从0开始配置webpack和搭建一个React项目

先来说说react搭建：
1 官方文档上也有提供直接下载react包，但是修改webpack配置比较麻烦

npx create-react-app my-app
cd my-app
npm start

修改webpack配置需要执行

npm run eject

2 自行搭建一个项目并且配置webpack--主要记录学习阶段～总结的可能不太好，勉强看看，重点记录一下第二种的方式

通过yarn管理包
 

1. 下载yarn

   yarn官网链接安装步骤都有的

2. 在项目目录下，执行yarn init

   会出现我们的package.json文件
   

3. 安装webpack

   yarn add webpack --dev

4. 新建webpack.config.js文件，

   贴官网示例:

          const path = require('path');
          module.exports = {
            entry: './src/app.js',
            output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'app.js'
            }
          };

   命令行执行webpack会发现dist目录
   
   注意：yarn安装过程中如果出错，尝试将yarn切换到淘宝镜像再进行下载哦～，我安装过程中出现过问题，切到这就没问题了
   yarn config set registry 'https://registry.npm.taobao.org'

5. 安装html-webpack-plugin

   yarn add html-webpack-plugin --dev
   

文档使用链接地址
按照文档操作，修改webpack.config.js使用html-webpack-plugin打包html文件
再次执行webpack命令，会发现dist文件夹下面多了一个index.html
设置html-webpack-plugin的template模版,在src新建index.html,并且设置html内容

  
    const path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
      entry: './src/app.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
      },
      plugins: [new HtmlWebpackPlugin(
        {
            template:'./src/index.html'
        }
      )]
    };

现在dist文档下面的index.html就是当前src下的index.html的模版了

1. 安装babel

   yarn add babel-loader @babel/core @babel/preset-env

具体详情见文档地址 在src/app.js中写入一些ES6语法，再次执行webpack命令，dist/app.js进行了转换

1. 安装react转换 babel-preset-react

   yarn add babel-preset-react --dev

   修改webpack.config.js

      const path = require('path');
      var HtmlWebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        entry: './src/app.jsx'
          path: path.resolve(__dirname, 'dist'),
          filename: 'app.js'
        },
        plugins: [new HtmlWebpackPlugin(
          {
              template:'./src/index.html'
          }
        )],
        module: {
          rules: [
            {
              test: /\.m?jsx$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env','react']
                }
              }
            }
          ]
        }
      };
   

2. 安装react
   yarn add react react-dom
   react添加操作地址详情
   将src/app.js修改为app.jsx

      import React from 'react';
      import ReactDOM from 'react-dom';
   
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app')
      );

   再执行webpack进行打包
   如果出现Error: Plugin/Preset files are not allowed to export objects, only functions.错误

说明babel的版本不一致，我这边是因为"babel-preset-react": "^6.24.1"默认装的6版本，其他babel安装的是7版本，所以统一升级到7或者降级到6

yarn add babel-preset-react@7.0.0 --dev

这样在进行打包，就可以了，这个时候打开dist/index.html我们看到hello, world!说成功编译了react

1. 安装style-loader

   yarn add css-loader style-loader --dev
   安装地址操作详情
   在webpack.config.js的rules中添加

    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },

   在src下新建一个文件index.css，随便修改一点样式

      h1{
          color:#F00;
      }

   在app.jsx中引入

      import './index.css'

   再次执行webpack打包，刷新dist/index.html
   

2. 安装ExtractTextWebpackPlugin插件将css独立到单独的文件

      yarn add extract-text-webpack-plugin --dev

   官网链接地址

      const path = require('path');
      var HtmlWebpackPlugin = require('html-webpack-plugin');
      const ExtractTextPlugin = require("extract-text-webpack-plugin");
      module.exports = {
          entry: './src/app.jsx',
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'app.js'
          },
          module: {
              rules: [
              {
                  test: /\.m?jsx$/,
                  exclude: /(node_modules|bower_components)/,
                  use: {
                  loader: 'babel-loader',
                  options: {
                      presets: ['@babel/preset-env','react']
                  }
                  }
              },
              {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: "css-loader"
                  })
              },
              ]
          },
          plugins: [
              new HtmlWebpackPlugin(
                  {
                      template:'./src/index.html'
                  }
              ),
              new ExtractTextPlugin("index.css"),
          ],
      };

   webpack.config.js配置如上
   再次执行webpack，dist目录下就多了一个index.css了～
   注意：打包遇到Tapable.plugin is deprecated. Use new API on .hooks instead错误，原因是extract-text-webpack-plugin目前版本不支持webpack4
   执行：yarn add extract-text-webpack-plugin@next --dev

3. 安装sass-loader

      yarn add sass-loader --dev

   在webpack.config.js中rules添加

      {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: ['css-loader', 'sass-loader']
          })
      }

   新建一个index.scss文件

      body{
          background: #ccc;
          #app{
              font-size: 22px;
          }
      }

   在执行webpack会出现报错Cannot find module 'node-sass'
   查看文档链接
   需要安装node-sass

      yarn add node-sass --dev

   打包，查看index.html可以看到样式应用上去了～
   

4. 安装url-loader处理图片链接

      yarn add url-loader file-loader --dev

   官网地址
   在rules中加入：

      {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192
              }
            }
          ]
      }

   项目中引入图片，进行打包，这样图片资源也打包解析进去了～

5. 添加解析字体rule

     {
          test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
          use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                  name:'resource/[name].[ext]'
                }
              }
          ]
      },
   

6. 添加webpack-dev-server

      yarn add webpack-dev-server --dev

   修改package.json添加
   "scripts": {
   "test": "echo "Error: no test specified" && exit 1",
   "watch": "webpack --watch",
   "start": "webpack-dev-server --open",
   "build": "webpack-cli"
   }
   执行yarn run start启动项目

   yarn run build打包项目

   最后附上当前为止修改后的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.jsx',
              output: {
                  path: path.resolve(__dirname, 'dist'),
                  filename: './js/[name].[hash].js',
                  chunkFilename: './js/[name].[hash].js',
              },
              devServer: {
                  port: 8080,
                  proxy: {
                      '/expo': {
                          target: 'https://xxx',
                          changeOrigin: true,
                          pathRewrite: {
                              '/expo': '/expo',
                          },
                          secure: false,
                      },
                  },
                  hot:true
              },
              module: {
                  rules: [
                  {
                      test: /\.m?jsx$/,
                      exclude: /(node_modules|bower_components)/,
                      use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env','react']
                      }
                      }
                  },
                  {
                      test: /\.css$/,
                      use: ExtractTextPlugin.extract({
                          fallback: "style-loader",
                          use: "css-loader"
                      })
                  },
                  {
                      test: /\.scss$/,
                      use: ExtractTextPlugin.extract({
                          fallback: 'style-loader',
                          use: ['css-loader', 'sass-loader']
                      })
                  },
                  {
                      test: /\.(png|jpg|gif|ico|jpeg)$/i,
                      use: [
                        {
                          loader: 'url-loader',
                          options: {
                              limit: 8192,
                              name: "[name].[ext]",
                              publicPath: "../images/",
                              outputPath: "images/"
                          }
                        }
                      ]
                  },
                  {
                      test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
                      use: [{
                          loader: "file-loader",
                          options: {
                            name: "[name].[ext]",
                            publicPath: "../fonts/",
                            outputPath: "fonts/"
                          }
                      }]
                  },
                  ]
              },
              plugins: [
                  new HtmlWebpackPlugin(
                      {
                          template:'./src/index.html'
                      }
                  ),
                  new ExtractTextPlugin("css/[name].css"),
              ],
              optimization:{
                  splitChunks:{
                      name:'common',
                      filename:'js/base.js'
                  }
              }
          };