webpack配置--loader

webpack的配置

loader

1.loader（用来帮助打包的工具设置打包方案例如图片的打包以及css的打包等等 ）下载npm install file-loader -D（-D是–save-dev缩写）
在webpack.config.js中设置打包规则 识别jpg文件进行打包 识别vue用vue-loader打包
用到file-loader 可以在loader文档中查找
原理：file-loader将图片打包到dist目录中再将图片地址返回到index.js对应的变量中
可以设置图片路径及图片名

module: {
        rules: [{
            test: /\.jpg$/,
            use: {
                loader: 'file-loader',
                options: {
                    //placeholder 占位符
                    name: '[name].[ext]',
                    outputPath: 'image/'
                }
            }

        }]
    },

url-loader相当于是基于file-loader的扩充
url-loader设置规则当图片小的时候图片以base64形式存放在bundle.js中当超出限制则存放在指定文件夹中引文弊端：图片太大则影响页面加载效果导致加载js比较慢将图片存入src中
相关文档：阅读url-loader file-loader的文档。

loder执行顺序从下到上从右到左
识别css的loader ：style-loader css-loader sass-loader
sass-loader下载：npm install sass-loader node-sass -D

style-loader将样式挂载到标签中 css-loader识别.css及与其他css之间的联系 sass-loader识别.sass文件

postcss-loader自动添加识别浏览器的前缀
下载：npm i -D postcss-loader
默认配置文件postcss.config.js

通过修改默认配置文件来使用autoprefixer插件自动添加浏览器前缀

关于样式打包（loader）：

查看文档 webpack.js 中doucumention中的guides中的Asset Management