webpack 3.x loader

css-loader

webpack配置

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader',css-loader] //顺序不能变
        }
    ]
}

loader的三种写法

第一种：
use:['style-loader','css-loader']
第二种：
loader:['style-loader','css-loader']
第三种：（常用，方便添加配置项）
use:[{
	loader:"style-loader"
},{
	loader:"css-loader"
}]

less-loader

npm install -D less

{
    test:/\.less$/,
    use:[{
        loader:'style-loader'
    },{
        loader:'css-loader'
    },{
        loader:'less-loader'
    }]
}

分离出css:

{
	test:/\.less$/,
	use:extractTextPlugin.extract({
		use:[{
			loader:'css-loader'
		},{
			loader:'less-loader'
		}],
		fallback:'style-loader'
	})
}

sass-loader

npm install -D node-sass sass-loader

配置和less类似(sass文件后缀是scss)

postcss-loader

自动为css3属性添加前缀

npm install -D postcss-loader autoprefixer

{
    test:/\.css$/,
    use:[{
        loader:'css-loader',
        options:{importLoaders:1}
    },
    'postcss-loader']
}

在根目录下添加文件postcss.config.js

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

图片

需要下载 url-loader file-loader

{
	test:/\.(png|jpg|gif)/,
	use:[{
		loader:'url-loader',
		options:{
			limit:5000
		}
	}]
}

html中的img标签直接引用图片

webpack默认不会打包img标签引用的图片地址，需要使用一个loader

npm install html-withing-loader -D

{
    test:/\.(html|htm)$/,
    use:['html-withing-loader']
}

babel

npm install -D babel-core babel-loader babel-preset-es2015 babel-preset-react

{
    test:/\.(jsx|js)$/,
    use:{loader:'babel-loader'},
    exclude:'/node_modules/'
}

在根目录新建.babelrc文件

{
    "presets":["es2015","react"]
}