簡単なwebpack+reactのプロジェクト構築

5968 ワード

先端 webpack

足場は本当に気持ち悪いです.先端の技術は日進月歩で、APIを見ないと方法が変わってしまいます.
余計なことは言わないで、構築を始めましょう.
まずnodejsとnpmです.webpackはnodejsに依存しています.npmは管理ツールです.比較的簡単で古い成長談ですので、ここでは詳しく説明しないで、ウェブサイトを参考にしてください.https://www.runoob.com/nodejs/nodejs-tutorial.html
そしてプロジェクトルートディレクトリでnpm initを実行すると自動的にpackage.jsonファイルが作成されます.
前に書く:
npm常用知識:
npxコマンドは、binディレクトリの下からパケットを実行し、大域ではないインストールのためのパケットの呼び出しが多く、ファイルを探して直接にパケットを呼び出すこともできます.
package.jsonの「scripts」は登録コマンドで、npm runで呼び出すことができます.
npm中-D(-dev-save)は開発環境でパッケージをインストールします.-P(-prod-save)は生産環境でパッケージをインストールします.-g(--global)はグローバルにインストールします.

React
reactは直接ダウンロードまたはnpmでダウンロードできます.
https://unpkg.com/[email protected]/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js
右クリックのウェブページの保存または直接にスクリプトタグを導入してもいいです.webpackの存在のため、直接にscriptタグを使うことを勧めません.
npmインストール:

npm i react react-dom -P

webpack
部分的にwebpackを設置することを推奨します.
npmインストール:

npm install webpack webpack-cli -D

loaderと常用プラグインをインストールします.

npm install less-loader style-loader css-loader url-loader babel-core file-loader babel-loader babel-preset-env babel-preset-react clean-webpack-plugin extract-text-webpack-plugin   webpack-dev-server html-webpack-plugin -D

webpack配置
プロジェクトのルートディレクトリの下でファイルを作成します.
参考までに私の設定ファイルを上に載せます.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

let WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
const extractCSS = new ExtractTextPlugin({
    filename: 'stylesheets/[name].css',
    disable: process.env.WEBPACK_ENV === "dev",
    ignoreOrder: true
});
const extractLess = new ExtractTextPlugin({
    filename: "stylesheets/[name].css",
    disable: process.env.WEBPACK_ENV === "dev",
    ignoreOrder: true
});
module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, './package.jsx'),
    devtool: 'inline-source-map',
    devServer: {
        port: 8086
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "js/[name].js",
        chunkFilename: 'js/[name].chunk.js',
        publicPath: '/dist/'
    },
    optimization: {
        splitChunks: {
            chunks: 'initial',
            cacheGroups: {
                vendor: {
                    test: /node_modules\//,
                    name: 'vendor',
                    priority: 10,
                    enforce: true
                },
                commons: {
                    test: /public\//,
                    name: 'public',
                    priority: 10,
                    enforce: true
                }
            }
        },
        runtimeChunk: {
            name:'mainfest'
        }
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react'],
                    }
                }
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({use :['css-loader'],fallback: 'style-loader'})
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192,
                      name: 'img/[name].[ext]'
                    }
                  }
                ]
            },
            {
                test: /\.less$/,
                use: extractLess.extract(['css-loader','less-loader'],'style-loader')
            }, {
                test: /\.ejs$/,
                loader: 'ejs-loader'
            },{
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                      loader: 'url-loader',
                      options: {
                        limit: 8192,
                        name: 'font/[name].[ext]'
                      }
                    }
                ]
            }
        ]
    },
    plugins: [
        extractLess,
        extractCSS,
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            filename: 'view/index.html',
            template: 'view/react_demo.html'
        }),
        ()=>{
            if(WEBPACK_ENV === 'dev') new webpack.HotModuleReplacementPlugin()
        }
    ]
}

その中で一番重要なパラメータはentryとoutputです.前者は包装の入口です.webpackはあなたの包装の入り口の依存項によって自動的にあなたのために包装に使うファイルです.
後者はテイクアウト後のファイルの出力先です.私はここにdist/jsディレクトリの中にWEBPACK_を置いています.ENVは環境変数です.開発環境か生産環境かを判断します.一部のプラグインは非常に性能を消耗しますので、生産環境では使えません.ここではこの変数を使って判断します.
その中にはたくさんの配置項目があります.webpackのAPI文書を参照してください.
環境変数の設定
package.jsonで修正した「scripts」は以下の通りです.

 "scripts": {
    "w": "npx webpack",
    "ws": "npx webpack-dev-server",
    "wo": "WEBPACK_ENV=online npx webpack -P",
    "wo_win": "set WEBPACK_ENV=online&& npx webpack -P"
  },

命令行の意味が分かりません.前書きを見てください.
その中でwebpack-dev-serverは開発時の小型サーバーを提供してくれました.ファイルを修正するたびに一回包装することを避けます.ここで使っているWsを名前として包装します.
その中で注意してください.私と私.winはwebpack環境変数を修正する文です.ここで私はカテゴリunixシステムで使用します.wo_winはwindowsシステムの下で使うものです.
入り口の書類をセットすれば、華麗なnpm run wに来られます.そして、間違えないように祈ります.emmm
作者のこの簡単な足場は利用があまり良くないですが、まだ使えます.github住所を置いてください.
https://github.com/xxx407410849/Reactcli
星を頼むよ

nodejsの中のcron