上文已经介绍了最基础部分，如有疑惑请再看上文 最简单的例子，边学边写webpack4 --基础部分

一、css-loader，style-loader

1.执行cnpm install css-loader --save-dev，cnpm install style-loader --save-dev
2.修改webpack.config.js以下内容，这里用的是webpack4+，其他版本写法不一样

module: {
    rules: [
        {
            test: /\.css$/,
            use:['style-loader','css-loader']
        }
    ]
}

3.新建src下的css/main.css 随便设置点body的样式，并且再index.js中写入 import './css/main.css';，运行npm run dev后可查看

二、sass-loader

1.cnpm install sass-loader --save-dev，此处一大坑，很多教程没提到它cnpm install node-sass --save-dev
2.webpack.config.js中新增rules下的内容

{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
}

3.新建src下的scss/main.scss 随便设置点body的样式，并且再index.js中写入 import './css/main.scss'，运行npm run dev后可查看

三、url-loader

1.cnpm install url-loader --save-dev (只会对css背景图生效) (在引入vue后html内的img标签路径问题自然修复,暂未找到不含vue的解决方案)
2.基于file-loader 所以要cnpm install file-loader --save-dev

{
    test:/\.(jpg|jpeg|png|gif|svg)$/,
    use:{
        loader:'url-loader',
        options:{
            name: '[name].[ext]', // 以源文件名字及格式输出
            outputPath: 'images/', // 输出到dist的img文件夹下
            limit: 10 * 1024 // 如果图片小于10k，就转为base64编码
        }
    }
}

四、html-loader (与HtmlWebpackPlugin不兼容)

1.cnpm install html-loader --save-dev

{
    test:/\.(jpg|jpeg|png|gif|svg)$/,
    use:{
        loader:'url-loader',
        options:{
            name: '[name].[ext]', // 以源文件名字及格式输出
            outputPath: 'images/', // 输出到dist的images文件夹下
            limit: 10 * 1024 // 如果图片小于10k，就转为base64编码
        }
    }
}

未完待续