конфигурация webpack4 (3) - ресурсы упаковки, такие как css/js/images

Webpack

упаковать css-ресурсы

использовать загрузчик

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

  1. Добавьте файлы в каталог проекта:

написать тестовый код

// src/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div class="box"></div>
</body>
</html>

// src/css/style.css
.box{
    width:50px;
    height: 50px;
    background-color: pink;
}
  1. Установитьcss-loaderа такжеstyle-loader
    css-loaderОтвечает за чтение файла css и последующее использованиеstyle-loaderВнедряйте css-контент в js и, наконец, встраивайте его в Html-код в виде тега стиля
    npm i -D css-loader style-loader
  2. изменить файл конфигурации
module:
{
    test: /\.css$/,
    use: [
        {
            loader:'style-loader',  //以style标签的形式嵌入到html中
            options:{  
                insertAt:top   //嵌入位置，top指顶部，不会覆盖掉html自带的style样式
            }
        }
        'css-loader'  //解析css文件
    ]
},

использование модуля:

  • rules: Массив, который хранит различные погрузчики
  • test: регулярное выражение для соответствия различным суффиксам имен файлов.
  • loader: Есть много способов использования
{
    test:/\.js$/,
    loader:'babel-loader'  //只有一个loader时
}
{
    test:/\.css$/,
    use:['style-loader','css-loader']  //多个loader,从右往左加载
}
{
    test:/\.css$/,
    use:[ 
        'style-loader',          //多个loader混合使用
        {                           //loader要设置相关参数时可以使用对象
            loader:'css-loader',
            options:{
                minimize:true
            }
        }
    ]
}

Использование плагина MiniCssExtractPlugin

использоватьcss-loader+style-loaderСпособ состоит в том, чтобы упаковать стили вjsфайл, затем сstyleТеги формы, встроенные в страницу.cssстиль сjsСмешивание файлов может привести к некоторой путанице стилей, поэтому использование плагинаcssСтили единообразно упакованы в одинcss файл, затем начните сlinkФорма тега встроена в страницу запроса ресурса.
webpack3Обычно используетсяExtractWebpackPlugin, но больше не поддерживается в webpack4, официально рекомендуется использоватьMiniCssExtractPluginзаменить.
Первая установка:
npm i -D mini-css-extract-plugin
Изменить файл конфигурации

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

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename:'bundle.js',
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {
                        loader:miniCssExtractPlugin.loader
                    },
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new miniCssExtractPlugin({
            filename:'[name].css'   //输出的css文件名，放置在dist目录下
        }) 
    ]
}

Откройте dist/index.html, вы увидите, что стиль css представлен в виде ссылки.

добавить префикс автоматически

Мы надеемся, что мы сможем автоматически добавлять префиксы браузера в css, мы можем использовать плагиныautoprefixer.

  1. Первая установка,npm i -D postcss-loader autoprefixer
  2. postcss-loaderНужен файл конфигурации, создайте новый в корневом каталогеpostcss.config.jsфайл, напишите:
module.exports={
    plugins:[require('autoprefixer')]
}
  1. настроить загрузчик
// webpack.config.js
{
    test: /\.css$/,
    use: [
        {
            loader:miniCssExtractPlugin.loader  //抽离成一个css文件
        },
        'css-loader',    //解析css
        'postcss-loader'   //先添加前缀
    ]
}
  1. написать тестовый код css
// src/css/style.css
.box{
    width:50px;
    height: 50px;
    background-color: pink;
    transform: rotateX(30deg);
}
  1. Пакетnpm run buildПосле этого откройтеdist/main.cssВы можете увидеть, что Tranform был префиксом с WebKit.

Сжать код css/js

использоватьoptimize-css-assets-webpack-pluginПлагин для сжатия кода css.

  1. Установитьnpm i -D optimize-css-assets-webpack-plugin
  2. Изменить файл конфигурации
// webpack.config.js

const opimizeCss=require('optimize-css-assets-webpack-plugin');

module.exports = {
    optimization:{   
        minimizer:[
            new opimizeCss()
        ]   
    },
    mode:'production'
    ....
}
  1. После запуска сборки npm откройте main.css и обнаружите, что он был сжат, но код js, который автоматически сжимается, когда среда по умолчанию является рабочей, больше не сжимается.uglifyjs-webpack-pluginдля сжатия js-кода.
  2. Установитьnpm i -D uglifyjs-webpack-plugin
  3. Изменить файл конфигурации
//webpack.config.js
const uglifyJsWebpackPlugin=require('uglifyjs-webpack-plugin')

module.exports = {
    optimization:{   
        minimizer:[
            new uglifyJsWebpackPlugin({
                cache:true,  //是否缓存
                parallel:true,  //是否并发打包，同时打包多个文件
                sourceMap:true  //打包后的代码与源码的映射，方便调试
            })
            ...
        ]
        ...
}

от es6 до es5

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

  1. установить вавилонnpm i -D babel-loader @babel/core @babel/preset-env
  2. настроить загрузчик
{
    test:/\.js$/,
    use:[
        {
            loader:'babel-loader',
            options:{
                presets:[
                    `@babel/preset-env`  //es6转es5
                ]
            }
        }
    ]
}

Упакуйте ресурсы изображения

Создать импорт изображения в js

(1) Импортированные изображения необходимо импортировать в файл записи js.

// index.js

import img from './img/big.jpg';  //file-loader将该图片放入到dist下，同时返回图片的地址
var imgElement = document.createElement('img');
imgElement.src = img;
document.body.appendChild(imgElement);

(2) Установкаfile-loaderи настроитьnpm i -D file-loader

// webpack.config.js

{
    test: /\.(png|jpg|gif|svg|jpeg)$/,
    loader: 'file-loader',
}

Внедрить фоновое изображение в css

Это то же самое, что и использование js для представления картинок, но по сравнению сfile-loader, чащеurl-loader, Вы можете напрямую кодировать base64 небольшие изображения, чтобы уменьшить HTTP-запросы. (1) Установкаurl-loaderи настроитьnpm i -D url-loader

// webpack.config.js

{
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        limit: 1024,  //小于该值的图片会使用base64编码
        name: '[name].[hash:8].[ext]'  //打包后的图片名称 [ext]指图片格式
    }
}

писать прямо в htmlЭтикетка

// src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div class="box"></div>
    <img src="./img/big.png">
</body>
</html>

После упаковки обнаруживается, что адрес образа жестко запрограммирован и не относится к dist, поэтому образ не может быть найден.html-withimg-loaderдля обработки изображений в html.
Установить и настроитьnpm i -D html-withimg-loader

// webpack.config.js
{
    test:/\.html$/,
    loader:'html-withimg-loader'
}

После упаковки и повторного запуска обнаруживается, что образ загружается корректно.

Настройка различных путей к ресурсам

В этой конфигурации все ресурсы помещаются в каталог dist, что выглядит очень запутанно.Мы надеемся, что js находится в папке js, css находится в папке css, а изображения находятся в папке img.Измените соответствующую конфигурацию.

//webpack.config.js

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename:'js/bundle.js', //给打包输出的js添加一层目录
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {
                        loader:miniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'postcss-loader'  
                ]
            },
            {
                test:/\.js$/,  //最后会打包进输出的js的文件，所以不需要配置路径
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                `@babel/preset-env`
                            ]
                        },
                    }
                ]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: '[name].[hash:8].[ext]',
                    //不能通过名字添加路径，因为背景图片还会被css处理一次，会再添加上css的路径
                    //最后就会变成 css/img/big.1763821.png
                    outputPath:'img/',  //通过该属性设置，打包输出的路径多一层
                    publicPath:'http://cdn.com'  //图片的访问路径为 http://cdn.com/img/big.561361.png
                },
                
            },
            {
                test:/\.html$/,
                loader:'html-withimg-loader',  //会加上url-loader里的outputPath
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new miniCssExtractPlugin({
            filename:'css/[name].css'  //通过名字添加一层路径
        }),
        new cleanWebpackPlugin()
    ]
}

После окончательной сборки запуска npm у вас могут быть разные папки, и index.html также правильно обрабатывает путь.

Категории