webpack安装及使用（二）

处理项目中的资源文件

使用babel-loader处理ES6代码

首先，需要安装babel-loader

npm install --save-dev babel-loader babel-core babel-preset-env

在webpack.config.js中添加配置

module: {

rules: [

{

test: / \. js $ / , //用正则表达式匹配需要处理的文件类型
                //通过include和exclude指定处理的范围，可以使用绝对路径、相对路径及数组

                include: [ "/src/" ] , //需要解析的文件夹

exclude: path. resolve (__dirname, "node_modules" ),//排除哪些文件夹下的内容

use: {

loader: "babel-loader" , //使用的loader

options: {               //loader相关的属性

presets: [ 'env' ] //babel-loader需要处理的es版本

}

}

}

]

},

处理css文件

安装css-loader style-loader postcss-loader

npm install --save-dev css-loader style-loader postcss-loader

在webpack.config.js的module.rules中添加

{

    test: / \. css $ / ,

    use: [

        "style-loader" ,                    //importLoaders 表示之后的x个loader同样适用于

        { loader: "css-loader" , options: { importLoaders: 1 } },    //@import引入的css

        {                               

            loader: "postcss-loader" ,

            options: {

                ident: "postcss" ,  //标识符，可自由命名，要求唯一，推荐为"postcss" 

                plugins: [     //使用的插件，必须存在plugins，默认为[]
                    require ( "autoprefixer" )({ browsers: [ 'last 5 version' ] })
                ]    //自动匹配浏览器前缀        //可添加插件对应的属性值

            }

        }

    ]

}

处理less和sass

安装less和less-loader

npm install --save-dev less less-loader

{

    test: / \. less $ / ,

    use: [

        "style-loader" , "css-loader" ,

        {

            loader: "postcss-loader" ,

            options: {

                ident: "postcss" ,

                plugins: [ require ( "autoprefixer" )({ browsers: [ 'last 5 version' ] })]

            }

        }, "less-loader"

    ]

}

sass同样处理

处理模板

对于静态的html文件可以使用html-loader处理，其它动态模板根据具体情况选择对应的loader

处理图片

一般分三种情况：在css背景中引用、在根目录index.html中引用和在模板中引用，在使用绝对路径和相对路径的情况下，使用file-loader都可以正确打包

npm install --save-dev file-loader

{

    test: / \. (png | jpg | gif | svg) $ / ,

    loader: "file-loader",

    options:{

        name: "assets/[name]-[hash:5].[ext]"

    }

}

url-loader与file-loader相似，但是可以设定limit，当文件大小大于limit时，与file-loader相同；小于limit时返回一个DataURL。

对于图片也可以使用image-loader进行压缩后再使用url-loader或file-loader打包。