WebPack配置（二、loader）

一、在对除js文件之外进行打包时（如css less之类）我们需要依靠loader，下列是package文件

　　

{
    "name": "sdasd",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.3",  //babel将es6转es5
        "babel-loader": "^7.1.5",　　
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^2.0.2", //打包css
        "file-loader": "^3.0.1",　　//打包大文件 图片
        "less": "^3.9.0",　　　　//打包less
        "less-loader": "^4.1.0",
        "style-loader": "^0.23.1",  //加载打包后css的样式
        "url-loader": "^1.1.2",　　//图片链接
        "webpack": "^3.6.0"
    }
}

　二、下面是webpake.config.js

const path = require('path')

module.exports = {

    entry: './src/main.js',
    output: {
        path: __dirname + '/dist/',
        filename: 'boundle.js',
        publicPath: 'dist/' //在dist文件中加载图片路径起作用
    },
    //这里是loader的配置 css
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //使用多个loader是,加载从右向左
        }, {
            test: /\.less$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader'
            }, {
                loader: 'less-loader'
            }]
        }, {
            test: /\.(png|jpg|gif|jpeg)/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: '1300', //当图片大小小于limit时会将图片编译成base64字符串形式 单位是bit 依赖 url-loader
                    //当图片大于limit时依赖于file-loader and file-loader
                    name: 'img/[name].[hash:8].[ext]' //中括号内存放变量 为file-loader打包的文件命名
                }

            }]
        }, { //这里是bable的配置 将es6转化为es5
            test: '/\.js$/',
            exclude: /(node_modules|bower_components)/, //exclude 排除文件
            use: {
                loader: 'babel-loader', //依赖加载项·
                options: {
                    presets: ['es2015'] //presets 预先设置Es5
                }
            }
        }]
    }
   

}