Не забудьте один раз отделить файл конфигурации Webpack

Webpack

С развитием фронтенд-технологий увеличение бизнес-логики и громоздкая функционализация стали самыми головоломными проблемами для фронтенд-персонала. Появление фронтенд-инструментов автоматизированного конструирования принесло людям, занимающимся фронтенд-дизайном, евангелие построения проектов и стало набором технологий, к которому должен вернуться каждый фронтенд-инженер. с идеей, что все является модулем.Я также являюсь автором.Используется инструмент для сборки интерфейса автоматизации.

Webpack знаком каждому фронтендеру, он рассматривает каждый статический файл как модуль и интегрирует для нас окончательные необходимые файлы js, css, изображения, шрифты и другие файлы после серии обработок.

Проблемы, вызванные одним файлом конфигурации

В этой статье вы уже знаете некоторые основные настройки Webpack перед компьютером и понимаете базовую структуру файла конфигурации webpack.config.js.

По мере увеличения нашей бизнес-логики в наш проект постепенно добавляются изображения, шрифты, препроцессоры и постпроцессоры css, ES6 и CSS, что, в свою очередь, приводит к увеличению файлов конфигурации, что делает файлы конфигурации более громоздкими и сложными для написания. Серьезный (неправильно, где прописаны конкретные файлы). Конфигурационный файл еще хуже из-за разной конфигурации рабочей среды и среды разработки в проекте.

Использование одного профиля влияет на возможность повторного использования задачи, так как потребность в проекте увеличивается, мы должны найти метод более эффективного управления файлом конфигурации.

Несколько способов управления конфигурационными файлами

Существует несколько способов управления файлами конфигурации.

  • Сохраняйте конфигурацию в нескольких файлах для каждой среды и указывайте webpack на каждый файл с помощью параметра --config и импортируйте общую конфигурацию через модуль.
  • Отправьте файл конфигурации в библиотеку, а затем укажите ссылку на библиотеку.
  • Отправьте файл конфигурации в инструмент.
  • Сохраняйте всю конфигурацию в одном конфигурационном файле и разветвляйтесь там и полагайтесь на параметр --env.

В четвертом варианте осуществления, описанном в настоящем документе, изолированный профиль веб-пакета.

отдельные файлы конфигурации

Создаем папку config в корневом каталоге и создаем четыре конфигурационных файла, а именно:

  • Файл конфигурации webpack.comm.js для общедоступной среды
  • Файл конфигурации webpack.development.js в среде разработки
  • Файл конфигурации webpack.production.js в рабочей среде
  • webpack.parts.js Файл конфигурации для каждой части конфигурации

Инструмент для объединения файлов конфигурации

Если файл конфигурации разбит на множество разных частей, их необходимо каким-то образом объединить, обычно путем слияния массивов и объектов, и webpack-merge делает это очень хорошо.

webpack-merge делает две вещи: позволяет объединять массивы и объединять объекты вместо переопределения композиции.

const merge = require("webpack-merge");
merge(
    {a : [1],b:5,c:20},
    {a : [2],b:10, d: 421}
)
//合并后的结果
{a : [1,2] ,b :10 , c : 20, d : 421}

Слияние файлов конфигурации с помощью webpack-merge

Сначала добавьте webpack-merge в проект

npm install webpack-merge --save-dev

Сначала настройте подключение каждого файла конфигурации

webpack.config.js

const commConfig = require("./config/webpack.comm");
const developmentConfig = requie("./config/webpack.development");
const productionConfig = require("./config/webpack.development")
const merge = require("webpack-merge");

module.exports = mode => {
    if(mode === "production"){
        return merge(commConfig,productionConfig,{mode});   
    }
    return merge(commConfig,developmentConfig,{mode});
}

Приведенный выше код использует значение режима, чтобы определить, является ли это средой разработки или производственной средой.

webpack.comm.js

const merge = require("webpack-merge");
const parts = require("./webpack.parts")    //引入配置零件文件
const config = {
    //书写公共配置    
}
module.exports = merge([
    config,
    parts......
])

webpack.production.js

const merge = require("webpack-merge");
const parts = require("./webpack.parts");   //引入配置零件文件
const config = {
    //书写公共配置
}
modules.exports = merge([
    config,
    parts......
])

webpack.development.js

const merge = require("webpack-merge");
const parts = require("./webpack.parts");   //引入配置零件文件
const config = {
    //书写公共配置
}
modules.exports = merge([
    config,
    parts......
])

Используйте значение --env для передачи параметров

Использование --env позволяет передавать строки в конфигурацию. Давайте изменим package.json

    "dev": "webpack --env development ",
    "prod": "webpack --env production",
    "dev:server": "webpack-dev-server --env development "

Таким образом, параметр среды режима параметра env передается в webpack.config.js, и можно судить, является ли это рабочей средой или средой разработки.

Как написать настраиваемый webpack.parts.js

Из вышеизложенного видно, что мы создали новый файл webpack.parts.js, в котором в основном хранятся некоторые части нашей конфигурации. Как написать настраиваемые, подключаемые части конфигурации. Это самая важная часть нашего файла.

Возьмем для примера loadCSS:

exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => ({
    module : {
        rules:[{
            test : reg,
            include,
            exclude,
            use[{
                loader : "style-loader",
            },{
                loader : "css-loader",
            }].concat(uses),
        }]
    }
})

В приведенном выше коде экспорт используется для экспорта одной части конфигурации, а параметры передаются путем деструктурирования присваивания. Используйте concat массива для подключения импортированных извне загрузчиков. Разбор параметров:

  • reg: Указывает регулярность проверки, совпадающую с загрузчиком, по умолчанию css, здесь может быть (less, sass, stylus).
  • include: указывает папку для упаковки.
  • исключить: указывает папку для пропуска упаковки.
  • использует: импортированный извне загрузчик.

Представлено в webpack.development.js

module.exports = merge([
    config,
    parts.loadCSS({
        reg : /\.less/,
        use : ["less-loader"]
    }),
    parts.loadCSS(),
])

Преимущества отдельных файлов конфигурации

Разделение файла конфигурации может быть тем, где мы продолжаем расширять конфигурацию. Наиболее важным преимуществом является то, что мы можем найти общие черты между различными целями. А также определите более мелкие части конфигурации для объединения, которые затем могут быть помещены в отдельные пакеты для использования в проектах. Конфигурациями также можно управлять как зависимостями вместо дублирования аналогичных конфигураций в нескольких проектах.

моя собственная конфигурация частей

Я покажу некоторые из моих собственных конфигураций компонентов.Поскольку я нахожусь на стадии обучения, я надеюсь, что большие ребята смогут указать на недостатки и добиться прогресса в обучении.

/**
 * @name 本地服务器配置
 * @param host  打开的url
 * @param port  打开url的端口号
 * 
 */
exports.devServer = ({ host, port} = {}) => ({
    devServer : {
        stats : "errors-only",
        host,
        port,
        open : true,
        overlay : true,
    }
})
/**
 * @name 未从js中分离的cssLoader配置
 * @param reg 匹配文件的后缀名test
 * @param include 所要打包的文件夹
 * @param exclude 跳过打包的文件夹
 * @param uses 所要向loadCSS中添加的loader
 */
exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => {
    return {
        module: {
            rules: [{
                test: reg,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }].concat(uses),
                include,
                exclude,
            }]
        },
    }
}
/**
 * @name 从js中分离的cssLoader配置
 * @param reg 匹配文件的后缀名test
 * @param include 所要打包的文件夹
 * @param exclude 跳过打包的文件夹
 * @param uses 所要向loadCSS中添加的loader
 *  */
const MiniCssExtrectPlugin = require("mini-css-extract-plugin");
exports.extractCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => {
    const plugin = new MiniCssExtrectPlugin({
        filename : "styles/[name]-[hash:5].css",
    })
    return {
        module: {
            rules: [{
                test: reg,
                use: [{
                    loader: MiniCssExtrectPlugin.loader,
                    options : {
                        publicPath : "../"
                    }
                }, {
                    loader: "css-loader"
                }].concat(uses),
                include,
                exclude,
            }]
        },
        plugins : [
            plugin,
        ]
    }
}
/**
 * @name css tree-shaking：将没有用到的css扔掉
 * @param paths 监听css tree-shaking 的文件名
 */
const PurifyCssPlugin = require("purifycss-webpack");
exports.purifyCSS = ({paths}) => ({
    plugins : [
        new PurifyCssPlugin({paths})
    ]
})

/**
 * @name autoprefixer 为css样式添加浏览器前缀
 * @author wangchong
 */
exports.autoprefix =() =>({
    loader : "postcss-loader",
    options : {
        plugins : () => [require("autoprefixer")]
    }
})

/**
 * @name loadImage ：打包图片资源
 * @param include 所要打包的文件夹
 * @param exclude 跳过打包的文件夹
 * @param options loader的options配置
 */
exports.loadImage = ({include,exclude,options} = {}) => ({
    module : {
        rules : [
            {
                test : /\.(png|jpg)$/,
                include,
                exclude,
                use : {
                    loader : "url-loader",
                    options,
                }
            }
        ]
    }
})

Статья взята из:Surviejs-webpack.

Категории