Webpack基础-2

webpack官网

1.loaders

var path = require('path');

module:{
    loaders:[
    {
        test:/\.js$/, //匹配条件，json文件
        loader: 'babbel',//转换页面中的es6代码
        include: path.resolve(__dirname, ' '),
        query:{
            presets: ['latest'] //添加参数
        }
    }
    ]
},

test的参数可以是正则表达式、字符串包含绝对路径、数组

2处理项目中的CSS

安装：npm i style-loader css-loader --save-dev

css后处理器，自动给css文件加上浏览器前缀

npm i postcss-loade --save-dev

npm i autoprefixer --save-dev

require是CommonJS语法

webpack.config.js在module的loader下
{
        test:/\.css$/, //匹配条件，json文件
        loader: 'style-loader!css-laoder?importLoaders=1postcss-loader',//转换页面中的es6代码
}


process：[
    require('autoprefixer')({
        broswersL: ['last 5 versions']
    })
}

?importLaoders = 1设置cssloader后指定几个数量的loader处理import进来的css文件

3.处理less和saaa

安装：npm i less-loader --save-dev

npm i less --save-dev

在module下的loader添加属性,loader的处理方式是从右到左postcss放在css和less之间

{
        test:/\.less$/, //匹配条件
        loader: 'style!css!postcss!less'
}

4.处理项目中的模板文件

html、dom、jsx、ejs、tpl  等

npm  i html-loader --save-dev

5.处理图片及其他文件

npm  i file-loader --save-dev

引用绝对路径图片

{
        test:/\.(png|jpg|gif|svg)$/i, //匹配条件
        loader: 'file-loader'
        query: {
            name: 'assets/[name]-[hash:5]. [ext]'//指定路径
         }
}

引用相对路径的图片

${ require('相对路径') }

image-loader等

url-loader: 像file loader，如果文件小于限制大小 能够返回Data Url，否则交给file loader，图片通过base64进行编码放入html代码中