webpack.config.js的loaders和配置

 

1，loaders

1, babel-loader:

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

{

    test: /\.js$/,

    exclude: path.resolve(__dirname,"./node_modules"),

    include:path.resolve(__dirname,"./src"),

    loader: 'babel-loader' ,

    options: {

        presets: ['env'] //插件

    }


}

2,css-loader,style-loader,postcss-loader

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

npm install --save-dev autoprefixer

style-loader 主要 将css 插入到head 的style 标签中内联

css-loader: 加载.css文件

importLoaders用来处理@import进来的样式表

postcss-loader后处理css

 

{
    test: /\.css$/,   
    //从右向左链式执行 
    loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
    //importLoaders的数量指的是当前loader之后loader的数量
}

在根目录上创建一个postcss.config.js文件，配置autoprefixer

module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"    
            ]
        })
    ]
};

 

css-loader?modules:

        CSS Module可以开启全局变量和局部变量，:global(...)表示全局变量，可以在全局中使用样式

 

3，less-loader

npm install --save-dev less-loader less

不需要使用importLoader

postcss的位置在css-loader和less-loader之间

{
    test: /\.less$/,

    loader: 'style-loader!css-loader!postcss-loader!less-loader'
}

 

4，模板html-loader

{
    test: /\.html$/,

    loader: 'html-loader'
},

 

5，file-loader，处理图片，项目下绝对路径或css背景下相对路径或组件的模板的绝对路径都会被处理

{
    test: /\.(png|jpg|gig|svg)$/,
    loader: 'file-loader' ，
    query:{
        name:'assets/[name]-[hash:5].[ext]' //自定义生成图片的名字
    }
}

某个组件的模板中使用相对路径时，可以使用src= " ${ require('../../assets/a.png') } "的方法引入相对路径

 

6，url-loader，类似file-loader，设定参数limit，当文件大于limit时丢给file处理，小于时则将图片变为编码，可能会产生冗余

使用image-webpack-loader对图片进行压缩

{
    test: /\.(png|jpg|gig|svg)$/,
    loaders: [
        'url-loader?limit=200&name=assets/[name]-[hash:5].[ext]',
        'image-webpack-loader'
    ]
}

 

一个完整的config.js文件

let path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry:'./src/index.js',
	output:{
		path:path.join(__dirname,'dist'),  //使用绝对路径！！
		filename:'js/[name].bundle.js'
	},
	module:{
		rules: [
	      { 
	      	test: /\.css$/, 
	      	loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
	      	//这里的数量指的是当前loader之后loader的数量	      	
	      },
	      { 
	      	test: /\.less$/, 
	      	loader: 'style-loader!css-loader!postcss-loader!less-loader'   	
	      },
	      { 
	      	test: /\.html$/, 
	      	loader: 'html-loader'   	
	      },
	      { 
	      	test: /\.js$/, 
	      	exclude: path.resolve(__dirname,"./node_modules"),
	      	include:path.resolve(__dirname,"./src"),
	      	loader: 'babel-loader' ,
	      	options: {
                presets: ['env'] //插件
            }

	      },
	      { 
	      	test: /\.(png|jpg|gig|svg)$/, 
	      	loaders: [
		      	'url-loader?limit=200&name=assets/[name]-[hash:5].[ext]',
		      	'image-webpack-loader'
	      	]
	      }
	    ]

	},
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',
			template:'index.html',
			inject:'body'
		})

	]
}

 

文件结构

 

src下的index.js文件是入口文件

import Layer from './components/layer/layer.js';
import './css/common.css';


const App = function(){
    var dom = document.getElementById('app');
    var layer = new Layer();
    dom.innerHTML = layer.tpl;
}

new App()