1.安装webpack
npm install webpack -g
2.进入项目目录，初始化
npm init
3.将webpack安装到项目依赖中
npm install webpack --save-dev
4.创建一个webpack.config.js配置文件
module.exports = {
// 需要编译的文件
entry:{
index1:'./src/index1.js',
index2:'./src/index2.js'
},// 编译配置项
output:{// 输出到哪个目录
path:'./dire',// 文件名 [name]会根据entry的键名来取值
filename:'[name].js'
}
};
目录结构：
5.cmd中输入:webpack
结果会生成一个dire目录。
OK，完成。
我们看看里面生成的代码。
乱七八糟的，如果想去掉这些可以这样。
var webpack = require('webpack');
module.exports = {
entry:{
index1:'./src/index1.js',
index2:'./src/index2.js'
},
plugins:[
new webpack.optimize.UglifyJsPlugin()
],
output:{
path:'./dire',
filename:'[name].js'
}
};
好像没啥用对吧，我们可以这样。
webpack小试身手，模块化开发。
目录结构
module.exports = {
entry:'./main.js',
plugins:[
new webpack.optimize.UglifyJsPlugin()
],
output:{
path:'./dire',
filename:'main.js'
}
};
这里将main.js做为主模块，我们可以在main.js里面将需要用到的js文件通过require引入进来，达到模块化的需求，这个require的用法和nodejs一样。
当然你可以划分成多个模块，你只需要更改一下这个。
module.exports = {
entry:{xx:'./xx/xx.js',
xx:'./xx/xx.js'
.......
},
plugins:[
new webpack.optimize.UglifyJsPlugin()
],
output:{
path:'./dire',
filename:'[name].js'
}
};
这样你就可以根据不同模块编写JS代码了。真不错。
但这都只是冰山一角，来看看webpack更强大的功能。
在main.js中导入css文件。
main:require('./src/index.css');
但是发现报错了，我们需要配置一下webpack.config.js
编译css
var webpack = require('webpack');
module.exports = {
entry:'./main.js',
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress:{//去除控制台错误
warnings:false
}
})
],
output:{
path:'./dire',
filename:'main.js'
},
module:{
loaders:[
{test:/.css$/,loader:'style-loader!css-loader'}
]
}
};
还得安装一下
npm install style-loader css-loader --save-dev
在main.js里面使用less文件。
require('./src/index.css');
require('./src/less.less');
需要进行如下配置：
loaders:[
{ test: /.less$/, loader: 'style-loader!css-loader!less-loader' },
{ test: /.css$/, loader: 'style-loader!css-loader' }
]
还得安装style-loader，css-loader，less-loader
npm install style-loader css-loader less-loader --save-dev
我安装完，webpack编译less文件的时候发现报错了。原来是还得安装一下less.
npm install less --save-dev
来看一下页面的效果：
我们用require过来的css文件变成style样式。
除了这个，我们还可以用来处理图片，将图片转成base64
main.js
require('./src/index.css');
require('./src/less.less');
var img = document.createElement('img');
img.src = require('./src/baidu.png');var box = document.getElementById('box');
box.appendChild(img);
webpack.config.js
loaders:[
{ test: /.less$/, loader: 'style-loader!css-loader!less-loader' },
{ test: /.css$/, loader: 'style-loader!css-loader' },
{ test: /.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]
limit:表示图片小于多少就转成base64格式的图片。
使用前我们还得安装一下url-loader
npm install url-loader --save-dev
webpack
看看效果
生成base64位了噢。
在css，less中都是可以使用的噢。
less代码
ul{
li{
200px;
height:200px;
color:red;
font-size:18px;
background:url(./baidu.png) no-repeat;
}
}
webpack实在太棒了。
如果你想编译其他格式的文件使用方法都差不多，这里就不试了。
通过webpack --watch监听文件变化自动打包。