2.配置css-loader、less-loader

1.创建css文件 src/assets/css/index.css、src/assets/less/index.less

/*index.css*/
body{
    background-color: blue;
}

/*index.less*/
body{
  color:#ffffff;
}

2.在src/index.js文件中引用src/assets/css/index.css文件

import './assets/css/index.css'
import './assets/less/index.less'

3.配置处理css、less、sass的插件
cnpm i -D css-loader@3.5.3 style-loader@1.2.1 less@3.11.1 less-loader@6.1.0
4.配置webpack.config.js文件

module.exports = {
    mode:'production',
    entry: path.resolve(__dirname, './src/index.js'),
    output:{
        filename:'[name].[hash:8].js',
        path:path.resolve(__dirname,'dist')
    },
    /*-----------新增部分-start------------*/
    module:{
        rules:[
            {
                test:/\.css$/,
                //注意 use中 webpack读取顺序按照从右到左 所以需要先读取css-loader 再读style-loader
                use:['style-loader','css-loader'],
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader'],
            }
        ]
    },
    /*-----------新增部分-end--------------*/
    //添加插件
    plugins:[
        htmlPlugin
    ]
};

但是，现在所有的css内容都会被添加到head中，变为内联样式(缺点)
5.配置mini-css-extract-plugin用于把css样式提取为css文件
5.1.安装插件
cnpm i -D mini-css-extract-plugin

5.2.配置webpack.config.js文件

//自动抽取css样式文件 并添加到index.html模板中
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
const miniCssExtractPlugin=new MiniCssExtractPlugin({
    //文件名称
      filename:'css/[name].[hash:8].css'
});
//添加插件
plugins:[
   htmlPlugin,
   miniCssExtractPlugin,//新增
]

将处理css文件的style-loader更换为MiniCssExtractPlugin.loader

module:{
        rules:[
            {
                test:/\.css$/,
                //注意 use中 webpack读取顺序按照从右到左 所以需要先读取css-loader 再读style-loader
                use:[
                      MiniCssExtractPlugin.loader,//-----更改部分 注意大小写
                      'css-loader'
                ],
            }
        ]
    },

6.css、less、sass处理前缀
eg:

::placeholder{
    color:gray;
}

6.1.配置自动加前缀autoprefixer
6.1.1.安装cnpm i -D autoprefixer post-loader
6.2.配置webpack.config.js文件

              rules:[
            {
                test:/\.css$/,
                //注意 use中 webpack读取顺序按照从右到左 所以需要先读取css-loader 再读style-loader
                use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader'],
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader'],
            }
        ]

6.3.根目录新建文件postcss.config.js

module.exports={
    plugins:[
        require('autoprefixer')
    ]
};

6.4.修改package.json文件

"browserslist": [
    "cover 99%.5"
]

6.以本地服务的方式进行启动
6.1.安装webpack-dev-server
cnpm i -D webpack-dev-server@3.10.3
6.2.修改package.json文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production --config webpack.config.js",//修改
    "dev": "webpack-dev-server --mode development --config webpack.config.js" //新增
  },

6.3.修改webpack.config.js

mode:'production'  //删除此行 标志为以运行的方式指定mode

6.4.修改启动端口(默认为8080)webpack.config.js

devServer:{
    //配置启动端口
    port:3000,
},

cnpm run dev运行项目 访问路径 http://localhost:3000