Webpack（二）模块配置

二、wabpack模块配置

1、css文件处理

（1）下载：npm install css-loader style-loader -D

（2）webpack.dev.config.js配置：

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

（3）解析：

• webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这文件
• 第一，遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件；
• 第二，计算完的css，将会用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。

2、图片文件处理

（1）下载：npm i url-loader file-loader -D

（2）webpack.dev.config.js配置：

module: {
    loaders: [
        {
            test: /\.(jpg|png|jpeg|gif|svg)$/,
            loader: 'url-loader?limit = 60000' // 60000单位为字节
        }
    ]
}

（3）解析：

• webpack最终会将各个模块打包成一个文件，因此样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据配置，将图片拷贝到相应的路径，再根据配置，修改打包后文件引用路径，使之指向正确的文件。
• 对于比较小的图片，使用base64编码，可以减少一次图片的网络请求；那么对于比较大的图片,使用base64就不适合了，编码会和html混在一起，一方面可读性差，另一方面加大了html页面的大小，反而加大了下载页面的大小，因此设置一个合理的limit是非常有必要的。

3、less文件处理

（1）下载：npm i less-loader less -D

（2）webpack.dev.config.js配置：

module: {
    loaders: [            
        {
            test: /\.less$/,
            loader: 'style-loader!css-loader!less-loader'
        }
    ]
}

（3）解析：

• webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader、css-loader和less-loader去加载这文件

4、es6处理

（1）下载：npm i babel-core [email protected] babel-preset-env babel-plugin-transform-runtime -D

（2）webpack.dev.config.js配置：

module: {
    loaders: [            
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude:/node_modules/,//排除node_mudules不去检测
            options:{
                    presets:['env'],//处理关键字
                    plugins:['transform-runtime'],//处理函数
                }
        }
    ]
}

（3）这里做配置，相关模块请参考此链接  https://www.jianshu.com/p/7bc7b0fadfc2