Webpack watch и Webpack PostCss loader

5

Webpack watch и Webpack PostCss loader

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

Нам нужно добавить в scripts следующую запись:

"watch" : "webpack --watch"

Webpack PostCss loader

Давайте посмотрим как подружить вебпак и PostCss.
Для начала нужно установить сам postcss-loader

npm i -D postcss-loader

Теперь нам нужно создать postcss.config.js.
В нем нам нужно перечислить все постобработки, которые мы хотим использовать.

module.exports = {
    plugins: {
        'rucksack-css': {},
        'lost': {},
        'autoprefixer' : {},
        'cssnano': {}
    }
}

Теперь нам нужно установить эти модули.

npm i -D rucksack-css lost autoprefixer cssnano

Теперь нам нужно указать лоадеры в webpack.config.js.

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader',
           'postcss-loader'
         ]
       },
       {
           test: /\.scss$/,
           use: [
               {
                   loader: "style-loader"
               },
               {
                   loader: "css-loader"
               },
               {
                   loader: "postcss-loader"
               },
               {
                   loader: "sass-loader",
                   options: {
                       includePaths: []
                   }
               }
           ]
       },
       {
           test: /\.js$/,
           exclude: /node_modules/,
           loader: 'babel-loader'
       }
     ]
   }
}

Теперь нам нужно сказать автопрефиксеру, какие браузеры мы бы хотели поддерживать. Одно из решений для этого: добавить в файл package.json еще одной свойство под названием «browserlist» и указать там следующее значение:

"browserlist" : [
    "> 1%",
    "last 2 versions"
]

За эту фичу отвечает расширение browserlist

Если хотите узнать побольше о плагинах для postcss, то можете посмотреть на сайте postcss.parts

You might also like More from author

Leave A Reply

Your email address will not be published.