Путь к рефакторингу: webpack различает производственную среду и среду разработки

Webpack

Начинать

Наша текущая конфигурация прописана в папке webpack.config.js, но на самом деле конфигурация, которую мы используем в среде разработки и производственной среде, отличается, например, размер пакета, который нам нужен в производственной среде, не может быть очень большой. , иначе онлайн-ответ будет медленнее. Поэтому нам нужно отделить производственную среду от среды разработки.

cross-env

В узле у нас есть объект процесса, который включает в себя некоторую информацию об узле, env и одном из его атрибутов, но нет process.env.NODE_ENV, переменной, которую мы добавили, чтобы различать среду, которую мы используем, чтобы различать производственная среда разработки.

Но способ установить его на разных компьютерах отличается, поэтому приходит cross-env, он может устанавливать среду и использовать переменные среды на разных платформах.

Нам нужно выполнить в консоли:

yarn add cross-env -D

Затем настраиваем в package.json:

"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development webpack-dev-server"

Добавляем в webpack.config.js:

const NODE_ENV=process.env.NODE_ENV;
console.log("--------"+NODE_ENV+"-----------");

Затем перейдите в консоль для выполнения при выполнении сборки запуска пряжи:

在这里插入图片描述
Консоль выводит поставленную нами постановку.

При выполнении пряжи run dev:

在这里插入图片描述
Развертка распечатывается, указывая на то, что мы завершили настройку.

webpack-merge

После настройки среды нам необходимо разделить конфигурацию.Сначала мы создаем новую ==webpack.config.dev.js== (среда разработки), ==webpack.config.prod.js== (производственная среда) в корневой каталог и установите исходный файл webpack.config.js измененным на ==webpack.config.common.js== (общедоступный).

Отдельное окружение нужно объединить с общим кодом, поэтому нам нужно использовать плагин webapck-merge, выполняем его в консоли:

yarn add webpack-merge -D

После загрузки перейдите в package.json, чтобы изменить конфигурацию:

//--config是可以设置我们执行哪个webpack文件，默认是执行webpack.config.js,但是我们现在修改文件名了，所以我们要设置一下
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js"

Мы переместили некоторые вещи, используемые в среде разработки, в ==webpack.config.dev.js==:

const path=require('path');
const webpack=require('webpack');
const merge=require('webpack-merge');//这里引入merge
const common=require('./webpack.config.common.js');//这里引入公共代码

module.exports=merge(common,{//注意这里的写法
    mode:'development',
    devtool:'cheap-module-eval-source-map',
    module:{
        rules:[

        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,//开启gzip压缩
        port: 8080,
        open:true,
        hot:true,
        overlay:true,
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
    ]
})

Рабочая среда перемещена в ==webpack.config.prod.js==:

const merge=require('webpack-merge');
const webpack=require('webpack');
const common=require('./webpack.config.common.js');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin  = require('clean-webpack-plugin');

module.exports=merge(common,{
    mode:'production',
    module:{
        rules:[

        ]
    },
    plugins:[
        new MiniCssExtractPlugin({//提取css
            filename:'css/main.css'
        }),
        new CleanWebpackPlugin('./dist'),//删除dist目录下的文件
        new BundleAnalyzerPlugin({ analyzerPort: 8090 }),

    ]
})

Затем перейдите к ==webpack.config.common.js== и удалите соответствующий код.

Здесь следует отметить еще один момент: при использовании MiniCssExtractPlugin.loader он не поддерживает горячее обновление, поэтому нам нужно различать это в зависимости от среды, мы модифицируем его в ==webpack.config.common.js==:

//开发环境使用style-loader
{
loader:NODE_ENV==="production" ? MiniCssExtractPlugin.loader : "style-loader"
}
Категории