webpack4配置react開發環境

webpack4大大提升了開發效率，簡化了配置複雜度，做爲一個大的版本更新，做爲一個對開發效率執着的愛折騰的程序員，已經忍不住要嚐嚐鮮了

首先是cli和webpack的分離，開發webpack應用程序須要安裝一些開發依賴

webpack

webpack-cli

webpack-dev-server

babel-loader, babel-core, babel-preset-env, babel-preset-react

css-loader less-loader style-loader less （ 若是是sass的話安裝 sass-loader和node-sass ）

file-loader

 yarn add webpack webpack-cli webpack-dev-server less less-loader style-loader css-loader babel-loader babel-core babel-preset-react babel-preset-env file-loader --save --dev

安裝好以後開始配置webpack

mode

4.0版本添加了一個mode參數

development 或者 production，直接設置這兩個參數，能夠省去配置一些插件，可是也能夠設置爲 none，插件也能夠本身手動配置

若是是development的話，至關於舊版本的

plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("development") }),
]

 若是是production 的話，至關於舊版本的

plugins: [
    new UglifyJsPlugin(/* ... */),
    new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("production") }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
]

 

入口和出口

舊版本中須要配置入口文件和出口文件，新版本若是不執行入口和出口，那麼默認的配置就會和下邊同樣

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js'
    }
}

零配置 

由於不少都有默認值了，因此咱們能夠實現零配置

以上咱們能夠認爲經過以下命令來實現

webpack --mode=development

 

loader

略有些複雜的loader配置可能會比較麻煩，若是用命令行實現也能夠，但會執行一條很長的命令

注意loader的順序是不能亂的，好比css 須要先經過 css-loader 而後 style-loader寫到頁面內， 也就是說在 use 裏是反着寫的

　　module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: ['file-loader']
            }
        ]
    }

 

devServer

webpack-dev-server 能夠快速讓網站運行在一個 express 做爲後臺的虛擬服務器上，這樣也能夠實現不少開發的便利，好比熱更新，瀏覽器實時刷新

主要參數