webpack学习---生产模式--将css从js中提取出来,形成css文件

将css从js中提取出来,形成css文件  需要npm下载 mini-css-extract-plugin 插件

                const { resolve } = require('path');
                const HtmlWebpackPlugin = require('html-webpack-plugin');

                //引入提取css的插件
                const MiniCssExtractPlugin = require('mini-css-extract-plugin');

                module.exports = {
                entry: './src/js/index.js',
                output: {
                    filename: 'js/built.js',
                    path: resolve(__dirname, 'build')
                },
                module: {
                    rules: [
                    {
                        test: /\.css$/,
                        use: [
                        // 创建style标签，将样式放入
                        // 'style-loader',
                        //*** 这个loader取代style-loader。作用：提取js中的css成单独文件
                        MiniCssExtractPlugin.loader,
                        // 将css文件整合到js文件中
                        'css-loader'
                        ]
                    }
                    ]
                },
                plugins: [
                    new HtmlWebpackPlugin({
                    template: './src/index.html'
                    }),
                   
                    //从js提取css插件
                    new MiniCssExtractPlugin({
                    // 设置输出的文件目录和重设文件名
                    filename: 'css/built.css'
                    })
                ],
                mode: 'development'
                };