webpack 打包工具使用案例

index.js

require('./index.css');
document.write('webpack 打包教程');

webpack.config.js

module.exports={
	entry:'./index.js',
	output:{
		path:__dirname,
		filename:'bundle.js'
	},
	module:{
		loaders:[{
			test:/\.css$/,
			laoders:['style-laoder','css-loader']
		}]
	}
};

index.html

<html>
<head></head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

demo npm start
npm init

<h1>sssssssss</h1>
<p id=content></p>

consumer\index.html

<h1>sssssssss</h1>
<p id=content></p>

admin\index.js

document.getElementById('content').innerText="this is admin page";

consumer\index.js

document.getElementById('content').innerText="this is consumer page";

开始用 webpack 打包项目

1.初始化 npm 项目

>shopping>npm init
>shopping>cnpm i webpack-dev-server

2.配置参数

webpack.config.js

var path=require('path');
module.exports={
	entry:{
		admin:'./admin/index.js',
		consumer:'./consumer/index.js'
	},
	output:{
		path:path.join(__dirname,'dist');
		filename:'[name].bundle.js'
	}
};

3.执行打包：

>shopping>cnpm i webpack-dev-server
>shopping>webpack --process --colors

webpack.config.js

var path=require('path');
module.exports={
	entry:{
		admin:'./admin/index.js',
		consumer:'./consumer/index.js'
	},
	output:{
		path:path.join(__dirname,'dist');
		publicPath:'/dist/',
		filename:'[name].bundle.js'
	}
};

在页面中应用打包好的js

<h1>sssssssss</h1>
<p id=content></p>
<script src="/dist/consumer.bundle.js"></script>

配置内部服务器启动

{
	"name":"shopping",
	"version":"1.0.0",
	"description":"",
	"main":"index.js",
	"script":{
		"start":"webpack-dev-server --process --colors --hot --inline"
	},
	"author":"",
	"license":"ISC"
}

修改后自动加载

webpack.config.js

var path=require('path');
var webpack=require('webpack');
module.exports={
	entry:{
		admin:'./admin/index.js',
		consumer:'./consumer/index.js'
	},
	plugins:[
		new webpack.optimize.UplifyJsPlugin()
	],
	output:{
		path:path.join(__dirname,'dist');
		publicPath:'/dist/',
		filename:'[name].bundle.js'
	}
};

执行重打包命令

>shopping>webpack

webpack 常用loader介绍

{
	"name":"shopping",
	"version":"1.0.0",
	"description":"",
	"main":"index.js",
	"script":{
		"start":"webpack-dev-server --process --colors --hot --inline"
	},
	"author":"",
	"license":"ISC",
	
	//安装依赖
	"devDependencies":{
		"babel-core":'5.8.25',
		"babel-loader":"5.3.2",
		"css-loader":"0.18.0",
		"file-loader":"0.8.4",
		"node-argv":"0.0.7",
		"sass-loader":"2.0.1",
		"style-loader":"0.12.4",
		"url-loader":"0.5.6",
		"webpack":"1.12.1",
		"webpack-dev-server":"1.10.1",
	}
}

body{
	//background:gray;
	background:url(../images/background.png);
	color:white;
}
h1:before{
	content:url(../icons/admin.png);
}

index.js

require('style!css!./admin.css');  //结合顺序从右往左
document.getElementById('content').innerText="this is Admin Page";

webpack.config.js

var path=require('path');  
var webpack=require('webpack');  
var config={  
    entry:{  
        admin:'./admin/index.js',  
        consumer:'./consumer/index.js'  
    },       
    output:{  
        path:path.join(__dirname,'dist');  
        publicPath:'/dist/',  
        filename:'[name].bundle.js'  
    },
	module:{
		loaders:[{
			//test:'/\.png$/',  //正则表达式
			test:'/images/', 
			loader:'file-loader'  
		},{
			test:'/icons/',  //把图片处理成base64 位文件
			loader:'url'     //把图片处理成base64 位文件
		}]
	}
};  

module.exports=config;

content.sass

body{
	p{
		color:gray;
	}
}

index.js

require('style!css!./admin.css');
require('./content.scss');
document.getElementById('content').innerText="this is admin page";

webpack.config.js

var path=require('path');  
var webpack=require('webpack');  

var config={  
    entry:{  
        admin:'./admin/index.js',  
        consumer:'./consumer/index.js'  
    },       
    output:{  
        path:path.join(__dirname,'dist');  
        publicPath:'/dist/',  
        filename:'[name].bundle.js'  
    },
	module:{
		loaders:[{
			//test:'/\.png$/',  //正则表达式
			test:'/images/', 
			loader:'file-loader'  
		},{
			test:'/icons/',  //把图片处理成base64 位文件
			loader:'url'     //把图片处理成base64 位文件
		},{
			test:'/\.scss$/',
			loader:'style!css!sass'
		}]
	}
};

index.js

require('style!css!./admin.css');
require('./content.scss');
document.getElementById('content').innerText=`
	Thiis is  Admin Page
And some other Page
`;

webpack.config.js

var path=require('path');  
var webpack=require('webpack');  

var config={  
    entry:{  
        admin:'./admin/index.js',  
        consumer:'./consumer/index.js'  
    },       
    output:{  
        path:path.join(__dirname,'dist');  
        publicPath:'/dist/',  
        filename:'[name].bundle.js'  
    },
	module:{
		
		loaders:[{
			//test:'/\.png$/',  //正则表达式
			test:'/images/', 
			loader:'file-loader'  
		},{
			test:'/icons/',  //把图片处理成base64 位文件
			loader:'url'     //把图片处理成base64 位文件
		},{
			test:'/\.scss$/',
			loader:'style!css!sass'
		},{
			test:'\.js$',
			exclude:/node_modules/,  //排除打包路径
			include:/(admin|consumer)/,              //包含打包路径
			loader:'babel'
		}]
	}
};

index.js

import 'style!css!./admin.css';
import './content.scss';
import 'jquery';
document.getElementById('content').innerText=`
	Thiis is  Admin Page
And some other Page
`;

webpack.config.js

var path=require('path');  
var webpack=require('webpack');  

var config={  
    entry:{  
        admin:'./admin/index.js',  
        consumer:'./consumer/index.js'  
    },       
    output:{  
        path:path.join(__dirname,'dist');  
        publicPath:'/dist/',  
        filename:'[name].bundle.js'  
    },
	module:{
		noParse:[/jquery/], //哪些目录不需要用目录遍历
		loaders:[{
			//test:'/\.png$/',  //正则表达式
			test:'/images/', 
			loader:'file-loader'  
		},{
			test:'/icons/',  //把图片处理成base64 位文件
			loader:'url'     //把图片处理成base64 位文件
		},{
			test:'/\.scss$/',
			loader:'style!css!sass'
		},{
			test:'\.js$',
			exclude:/node_modules/,  //排除打包路径
			include:/(admin|consumer)/,              //包含打包路径
			loader:'babel'
		}]
	}
};

完整源码下载

webpack 打包工具使用案例

猜你喜欢