diff --git a/antwar.config.js b/antwar.config.js index 50e1c9ba3e32..d43de381d092 100644 --- a/antwar.config.js +++ b/antwar.config.js @@ -67,6 +67,9 @@ module.exports = { require.context('./loaders/page-loader!./src/content/plugins', false, /^\.\/.*\.md$/), require.context('./loaders/page-loader!./generated/plugins', false, /^\.\/.*\.md$/) ); + }, + redirects: { + 'extract-text-webpack-plugin': '/plugins/mini-css-extract-plugin/' } }, loaders: { diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md index 8a075fe54de3..9f1dd11acf3c 100644 --- a/src/content/guides/asset-management.md +++ b/src/content/guides/asset-management.md @@ -7,6 +7,7 @@ contributors: - TheDutchCoder - sudarsangp - chenxsan + - EugeneHlushko --- If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled. @@ -37,16 +38,17 @@ __dist/index.html__ ## Loading CSS -In order to `import` a CSS file from within a JavaScript module, you need to install and add the [style-loader](/loaders/style-loader) and [css-loader](/loaders/css-loader) to your [`module` configuration](/configuration/module): +In order to `import` a CSS file from within a JavaScript module, you need to install and add the [mini-css-extract-plugin](/plugins/mini-css-extract-plugin) and [css-loader](/loaders/css-loader) to your [`module` configuration](/configuration/module): ``` bash -npm install --save-dev style-loader css-loader +npm install --save-dev mini-css-extract-plugin css-loader ``` __webpack.config.js__ ``` diff const path = require('path'); ++ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: './src/index.js', @@ -59,16 +61,19 @@ __webpack.config.js__ + { + test: /\.css$/, + use: [ -+         'style-loader', ++         MiniCssExtractPlugin.loader, +         'css-loader' +       ] + } + ] -+ } - }; ++ }, ++ plugins: [ ++ new MiniCssExtractPlugin() ++ ], ++ }; ``` -T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with `.css` will be served to the `style-loader` and the `css-loader`. +T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with `.css` will be served to the `mini-css-extract-plugin` and the `css-loader`. This enables you to `import './style.css'` into the file that depends on that styling. Now, when that module is run, a `