React全家桶建站教程-Webpack #5

$ sudo npm install -g create-react-app //全局安装的话，需要权限，所以使用sudo
$ create-react-app my-app
$ cd my-app
$ npm install webpack         //安装webpack包
$ npm install webpack-cli   //脚本
$ npm install html-webpack-plugin       //生成html插件
$ npm install extract-text-webpack-plugin@next   //抽离css，ant的css代码体积非常大，这样抽离之后，减少了代码体积。
$ npm install babel-preset-es2015   //预先加载es6编译的相关模块，这个软件包已被弃用，但并不影响使用。
$ npm install babel-preset-react      //编译react
$ npm install babel-preset-stage-3  //这个看你想要支持什么语法了，就选择0-3的其中一种。
$ npm install babel-plugin-transform-class-properties   //此插件转换es2015静态类属性以及使用es2016属性初始值设定项语法声明的属性。
$ npm install style-loader        //将css插入页面
$ npm install file-loader          //文件打包
$ npm install babel-loader     //转化es6代码
$ npm install babel-polyfill    //如果想使用 new Set()，Object.assign语法，就得用到它
$ npm install babel-plugin-import  //支持import 引入插件 
$ npm install webpack-dev-server  //提供web服务

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");   //引入对应插件
module.exports = {
  devtool: 'source-map',       //模式选择，这里选择原始代码，因为开发环境不需要去混淆代码。
  mode: 'development',        //环境区分，是开发环境development还是生产环境production
  entry: ['babel-polyfill', './src/index.js'],   //入口文件
  output: {                  
    filename: '[name].js',    //输出文件
    hashDigestLength: 7,   //hash值设置
    path: path.resolve(__dirname, 'build')         //输出文件路径
  },
  module: {
    rules: [
      {
        //匹配js或jsx文件进行编译转换
        test: /\.js|jsx$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react', 'es2015', 'babel-preset-env', 'stage-3'],
            plugins: [["transform-class-properties"],["import",{ "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]]
          }
        }
      },
      {
        //匹配css文件，进行抽离css
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
       //匹配图片
        test: /\.(png|svg|jpg|gif|jpeg)$/,
        use: [
          'file-loader'
        ]
      },
      {
       //匹配字体
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    //输出特定的html文件
    new HtmlWebpackPlugin({
      title: 'my-app',
      template: 'public/index.html'
    }),
    //抽离的css文件名
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.NamedModulesPlugin()    //当开启 HMR 的时候使用该插件会显示模块的相对路径
  ],
  devServer: {      //虚拟服务器
    hot: false,        //热模块更新作用。即修改或模块后，保存会自动更新 true开启，false关闭
    historyApiFallback: true,         //如果为 true ，页面出错不会弹出 404 页面
    compress: true      //如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用
  }
};

<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->