webpack资源加载

1.Loading Css

module.exports={
    entry:'./src/main.js',
    output:{
        path:path.join(__dirname,'./dist/'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                //注意这里的顺序很重要，不要乱了顺序
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }

打包：

npm run build

解释：打包css也是把css文件内容转换成了一个JavaScript模块，然后再运行JavaScript的时候，会动态创建一个style节点插入到head头部

2.Loading img

安装依赖：

npm install --save-dev file-loader

配置：

module:{
        rules:[
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    }

3.Loading Less

安装依赖：

npm i -D css-loader style-loader less less-loader

配置：

module:{
        rules:[
            {
                test:/.less$/,
                use:[
                    'style-loader', //3.根据模块生成style节点插入head标签中
                    'css-loader', //2.再把css转为js模块
                    'less-loader'  //1.先把less转换成css
                ]
            }
        ]
    }