1.安装webpack
前提得安装node(https://nodejs.org),官网下载安装即可。
npm install -g webpack
这样全局都可以使用webpack命令了
2.使用webpack
新建一个目录：webpackdemo,进入目录新建文件：entry.js，内容如下：
document.write('hello webpack world!')
新建index.html:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
当前目录命令行运行：
webpack ./entry.js bundle.js
会在此目录下多出一个bundle.js文件，此时浏览器打开index.html，就会看到页面显示：
hello webpack world!
3.加入样式
在日常的开发中，不可能只有JS文件，我们还需要CSS的配合才能做出好的产品，默认情况下webpack只处理JS文件，处理其他文件需要特定的loader。比如：css-loader,style-loader。
安装loader：
npm install css-loader style-loader
style.css
body {
background: yellow;
}
更新entry.js:
require('!style!css!./style.css');
document.write('hello webpack world!')
如果引入每个css文件前面都要加入这么多东西，很繁琐，所以我们可以bind：
更改entry.js:
require('./style.css');
document.write('hello webpack world!')
运行：
webpack ./entry.js bundle.js --module-bind 'css=style!css'
4.引入配置文件
其实像上面每次都要运行那么多命令，也是令人头痛。所以我们引入了webpack的配置文件，webpack.config.js:
let path = require('path');
module.exports = {
entry:'./app.js',
output:{
path:path.join(__dirname,'/dist/'),
filename:'bundle.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style!css'}
]
}
}
执行webpack，就会生成bundle.js。
4.多入口配置
更改webpack.conf.js内容如下：
let path = require('path');
module.exports = {
entry:{
index:'./src/index.js',
common:[//这里就是公共的文件
'./src/common.js',
'./src/common1.js'
]
},
output:{
path:path.join(__dirname,'/dist/'),
filename:'[name].js'//注意这里的name就是上面entry里的key：index，common
},
module:{
loaders:[
{test:/\.css$/,loader:'style!css'}
]
}
}
运行webpack，在dist目录下就会生成：index.js和common.js。
5.提取css文件
上面的配置是直接把样式添加到页面的，我们需要提取css文件，提取文件需要插件：extract-text-webpack-plugin。
npm install extract-text-webpack-plugin --save-dev
webpack.config.js更改如下：
let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry:{
index:'./src/index/index.js',
list:'./src/list/list.js',
common:[
'./src/common/common.js',
'./src/common/common1.js'
]
},
output:{
path:path.join(__dirname,'/dist/'),
filename:'[name].js'
},
module:{
loaders:[
{
test:/\.css$/,
loader:ExtractTextPlugin.extract('style-loader', 'css-loader')
}
]
},
plugins:[
new ExtractTextPlugin('[name].css')
]
}
运行webpack命令，会发现在dist目录下多了css文件。
网友评论