0からwebpackを使って自分のReact足場を構築します.

react-cli-diy
0からwebpackを使って自分のReact足場を構築します.
ソースアドレス
プロジェクトの使用:

git clone [email protected]:TigerHee/react-cli-diy.git

cd react-cli-diy

npm install

      ：
npm run dev

    ：
npm run build

実装ステップ:
まず、新規プロジェクトディレクトリを作成し、このディレクトリ内でnpm init初期化プロジェクト環境を実行します.
webpackプロファイルを作成します.

webpack.co fig.js/公共構成

webpack.prod.js/生産環境構成

webpack.dev.js/開発環境構成

publicディレクトリを作成して、htmlテンプレートファイルを保存します.
srcディレクトリを作成してフロントエンドプロジェクトを保存するために必要なリソースです.
webpackのインストールに関する依存性:npm i webpack webpack-cli webpack-merge -Dwebpack.co.nfig.jsファイルを修正する:

module.exports = {
  entry: './src/index.js',  //   
  output: {                 //   
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname, 'dist')
  },
}

webpack-mergeを使って、公共配置ファイルをそれぞれ生産と開発に行きます.

const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.js')

module.exports = merge(baseConfig, {
  //        
})

ローカルサービスのインストールと既存のモデルの使用に関する依存:npm i webpack-dev-server html-webpack-plugin -D共通構成内では、html-webpack-pluginを使用してindex.

plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: 'index.html',
    hash: true,                       //   hash       
    minify: {                         //     html      
      removeAttributeQuotes: true,    //        
      collapseWhitespace: true        //         
    }
  }),
]

開発モードは開発サーバに使用する必要があります.

devServer: { //          
  port: 3000,
  progress: true,
  contentBase: './dist',
  open: true,
  proxy: {
    //           
  }
},

基本構成をアピールした後、package.json内にスタートスクリプトを設定する.

"scripts": {
  "build": "webpack  --config webpack.prod.js",
  "dev": "webpack-dev-server --config webpack.dev.js"
},

次に、共通設定でcssとlessを設定します.

rules:[
  {
    test: /\.(css|less)$/,
    use: [
      'style-loader',
      'css-loader',
      'postcss-loader',
      'less-loader'
    ]
  },
]

postcs-loader対応プレフィックスは、個別のプロファイルpostcs.co nfig.jsが必要です.
上記のようにcssを処理すると、スタイルファイルはhtmlのテンプレートに挿入されます.cssファイルから引き離したいです.link方式で紹介します.npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

{
  module:{
    rules: [
      {
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
    ]
  },
  plugins: [
    //   css  
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css',
      chunkFilename: '[id].[hash:8].css',
    }),
  ]
}

このとき、npm run buildを実行すると、前回のパッキングの結果がどこに堆積されているかを確認するために、まずクリアする必要があります.npm i clean-webpack-plugin -D生産環境の設定を変更する:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

plugins:[
  //         dist
  new CleanWebpackPlugin(),
]

mini-css-extract-pluginを使ってcssを引き出してlinkにするには、optimize-css-assets-webpack-pluginを使ってcssを圧縮する必要があります.この方法を使ってcssを圧縮するには、uglifyjs-webpack-pluginを必要とします.npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

optimization: {              //    
  minimizer: [
    new UglifyJsPlugin({     //   js
      cache: true,           //     
      parallel: true,        //       
    }),
    new OptimizeCSSAssetsPlugin({})    // css    
  ]
},

公共配置でjsとjsxを設定します.npm i babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators -D加えてReactのbabel:npm i @babel/preset-react -D

{
  test: /\.(js|jsx)$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react'
      ],
      plugins: [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
      ]
    }
  },
  exclude: /node_modules/
},

プロジェクト追加のReact依存性:npm i react react-dom -Sindex.jsにReactコードを書きます.うん～、実行できます.
公共配置のリガで画像処理を行います.npm i file-loader url-loader -D

{
  test: /\.(png|jpg|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 200 * 1024,          //   200k  base64
    }
  }
}

lessにbackground-mageを入れてみてください.ok.
開発モードはモニターが必要です.

watch: true,
watchOptions: {
  poll: 1000,              //     1000 
  aggregateTimeout: 300,   //   ，        ，           
  ignored: /node_modules/  //             ，
},

最後のnpm run buildとnpm run devは完璧に動作し、足場の構築に成功しました.