Summary of Usage methods for Extract-text-webpack-plugin plugins in Webpack

Why use Extract-text-webpack-plugin this plugin, this plug-in can be implemented for our style modular, and in the packaging of the time can generate a always CSS file. I used it in the React project. What's the next use?

1, first we NPM installs NPM install Extract-text-webpack-plugin--save-dev.

2, configuration in webpack.config.js first we are going to introduce

Const EXTRACTTEXTWEBPACK = require ("Extract-text-webpack-plugin"); A detailed description of the inside parameters can be seen on the GIT website https://github.com/webpack-contrib/extract-text-webpack-plugin

    Module: {        loaders: [            {                test:/\.js (x)? $/,                loader: "Babel-loader",                Exclude:/mode_modules/            } ,            {                test:/\.css$/,                extracttextwebpack.extract ({                    fallback: ' Style-loader ', use                    : [' Css-loader '],                    publicPath:path.resolve (__dirname, ' dist ')}}        ]    }

3: We want to see this folder after compiling, this will generate a style.css in our dist directory, if you use less. Sass,stylus this time you just need to download the corresponding loader and then make the corresponding configuration in the inside.

plugins: [        new  htmlwebpackplugin ({            './src/index.html ')        }),         New Extracttextwebpack ("Style.css")    ]

Summary of Usage methods for Extract-text-webpack-plugin plugins in Webpack