index.js
|---
admin
|----index.html
|----index.js
consumer
|----index.html
|----index.js
node_modules
|----package.json
|----webpack.config.js
admin\index.html
1.初始化 npm 项目
webpack.config.js
3.执行打包:
在页面中应用 打包好的js
shopping
|---
admin
|----index.html
|----index.js
|----admin.css
consumer
|----index.html
|----index.js
node_modules
|----package.json
|----webpack.config.js
admin.css
webpack 处理 sass
shopping
|---
admin
|----index.html
|----content.sass
|----index.js
|----admin.css
consumer
|----index.html
|----index.js
node_modules
|----package.json
|----webpack.config.js
demo3 > npm start
webpack.config.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
shopping
|---
admin
|----index.html
|----index.js
consumer
|----index.html
|----index.js
node_modules
|----package.json
|----webpack.config.js
admin\index.html
<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",
}
}
shopping
|---
admin
|----index.html
|----index.js
|----admin.css
consumer
|----index.html
|----index.js
node_modules
|----package.json
|----webpack.config.js
admin.css
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;
重新编译
webpack 处理 sass
shopping
|---
admin
|----index.html
|----content.sass
|----index.js
|----admin.css
consumer
|----index.html
|----index.js
node_modules
|----package.json
|----webpack.config.js
demo3 > npm start
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'
}]
}
};
完整源码下载