webpack 配置说明

1，webpack.config.js 配置打包css样式

/*
//webpack的配置文件
作用：指示webpack 干哪些活（当你运行webpack指令时，会加载里面的配置）

所有构建工具都是基于nodejs平台运行的——模块化默认采用commonjs.
*/

//resolve 用来拼接绝对路径的方法
const {resolve} =require('path')

module.exports = {
    //webpack配置
    entry: './src/index.js',
    //输出
    output: {
        //输入文件名
        filename: 'built.js',
        //输入路径
        //__dirname nodejs的变量，代表当前文件的目录绝对路径
        path:resolve(__dirname,'build'),
    },
    //loader配置
    module: {
        rules: [
            //详细loader配置
            {
                test: /.css$/,
                //使用哪些loader进行处理
                use: [
                    //use数组中loader执行顺序：从右到左，从下到上依次执行
                    //创建一个style标签 将js中的样式资源插入进去，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs 模块加载到js中，里面的内容是样式字符串
                    'css-loader',
                ]
            }
        ]
    },
    plugins: [
        //详情Plugins配置
    ],
    //模式
    mode: 'development',//开发模式
    //mode:'production',//生产模式  代码进行压缩
}

2，样式图片，页面图片

    {
                //问题：处理不了html中Img图片
                //处理图片
                test: /.(jp[e]?g|png|gif)$/,
                //使用一个loader
                loader: 'url-loader',
                options: {
                    //图片大小小于8kb ，就会被base64处理
                    //优点：减少请求数量(减轻服务器压力)
                    //缺点：图片体积会更大
                    limit: 8 * 1024,
                    //问题 ：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析时会出问题：【object Module】
                    //解决：关闭url-loader的Es6模块化，使用commonjs解析
                    esModule: false,
                    //[hash:10]取图片的hash的前10位
                    name:'[hash:10].[ext]'
                }
            },
            {
                test: /.html$/,
                //处理html文件的img图片 (负责引入img，从而能被url-loader进行处理)
                loader: 'html-loader',
                options: {
                    esModule:false
                }
            }