开始构造开发环境，8、提取css成单独文件

这里需要用到 mini-css-extract-plugin 插件

npm i -D mini-css-extract-plugin

引入插件

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

module

module:{
       rules:[
        {
            test: /\.css$/,
            use: [ 
                //开发环境需要将css跟js分开
                //style-loader 是以 style的形式写在 html 页面
                // 'style-loader', 
                //提取 js 中的 css 成单独文件 
                MiniCssExtractPlugin.loader,
                //css loader 是将 css整合到 js 
                'css-loader'
            ]
        },
       ] 
    },

plugins

指定输出的名字

new MiniCssExtractPlugin({
            filename:'css/bulid.css'
        })

 

后来我用  "webpack": "^5.6.0" 来打包，发现开始报错了

Error: Automatic publicPath is not supported in this browser

 

解决方法：

1、指定 pulicPath: ' '

{
                test: /\.css+$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options:{
                            publicPath: ''
                        }
                    },
                    'css-loader'
                ]
            },

2、在output 加上 

publicPath: ''

 

然鹅后来，bug又来了，页面中的图片不见了

 

 点开 build.css 一看

 

 才发现，引用的路径错了

 

应该是publicsPath 所影响的，所以修改 ，

 

然后便正常了