loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:__dirname+"/node_modules/", //排除打包的范围（需要绝对路径）
include:__dirname+"src",//指定打包的范围（需要绝对路径）
query:{
presets:['latest']
}
}
]
安装loader：npm install xxx-loader
loaders的参数：1.test:必须满足的条件(正则) 2.exclude:不能满足的条件(loader的排除范围) 3.include:由加载程序转换导入文件的路径或文件数组 （loader处理范围） 4. loader 5.loaders:将串联的loader用数组表示
提高打包的速度：exclude排除打包的范围 include:指定打包的范围。
安装postcss-loader: npm i -D postcss-loader （npm install postcss-loader --save-dev ） 在webpack.config.js的module里配置
rules: [
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } },'postcss-loader' ]
}，
{
test: /\.scss$/,
loaders:['style-loader','css-loader','postcss-loader','sass-loader']
}
]
新建一个文件 postcss.config.js文件：
module.exports = {
"plugins": {
" autoprefixer": {}
}
}
importLoaders: 1 : 表示在css-loader之后指定几个数量的loader来处理import进来的资源
webpack处理模板文件 1.webpack把模板文件当做字符串处理
2.webpack把模板当成已经编辑好的模板的处理函数
webpack 处理图片 file-loader 在模板文件中的图片<img src="${ require('图片路径')}">
{
test: /\.{png|jpg|jif|svg}$/i,
loaders:'file-loader',
query:{
name: 'images/[name]-[hash:5].[ext]'
}
}
url-loader: (base64编码的图片文件)
{
test: /\.{png|jpg|jif|svg}$/i,
loaders:'url-loader',
query:{
limit:20000,
name: 'images/[name]-[hash:5].[ext]'
}
}
