之前写过一篇有关gulp的,正式使用前需要的环境一样,这里就不多提了,有兴趣可以去看一下我的这篇文章。
一.安装
先初始化,创建一个package.json
文件
npm init
一路下一步就好了,最后一步ok确定。
接着安装webpack
,命令如下:
npm install -g webpack
npm install --save-dev webpack
只要没有
error
就算安装成功,warn
不用管。
二.使用webpack
先创建一些必要的文件,可以像我建立如下目录(仅供测试)。
接着给文件里面添加代码,由于测试只用最简单的代码,下面是各个文件对应的代码:
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Webpack</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
app/main.js
var template = require('./template.js');
document.getElementById('root').appendChild(template());
app/template.js
module.exports = function() {
var tmp = document.createElement('div');
tmp.textContent = "Hello Webpack!";
return tmp;
};
接下来就可以使用webpack
了,在控制台输入:
webpack app/main.js bundle.js
效果如下:
然后到项目目录下发现多出来一个bundle.js
文件:
这时候就成功了,可以打开index.html
去浏览器看一下效果。
三.使用webpack—进阶
现在webpack这么火,而且确实很好用,如果只是上面的那样肯定是不科学的。
首先,在项目根目录下建一个webpack.config.js
的文件,以后webpack的配置都写在这面。
现在的项目结构是这样的:
如果把刚才在命令行的操作放在配置文件里面是这样的:
webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/",
filename: "bundle.js"
}
}
entry
对应的路径是唯一的入口文件;
output
是出口,path
对应的是打包完成的生成文件的存放位置;
filename
是打包完成的生成文件的文件名。注:这里我放在了根目录下,觉得不舒服的话可以放在一个文件夹下,例如修改
output
的path
为path:__dirname + "/dist"
,这样打包后生成的文件就存在了根目录下的dist
文件夹里面。
运行效果如下:
下面简单介绍一些webpack.config.js
中的其他配置:
1.devtool
官网的介绍是这样的:
webpack supports SourceUrls and SourceMaps for simple debugging. It can watch your files and comes with a development middleware and a development server for automatic reloading.
就是说他会生成source maps
,让我们知道打包生成文件的源文件在哪,调试也更方便。
但是devtool
有很多种选项,我就不一一介绍了,这里放上一张官网的表格。
devtool | build | rebuild | production | quality |
---|---|---|---|---|
eval | +++ | +++ | no | generated code |
cheap-eval-source-map | + | ++ | no | transformed code (lines only) |
cheap-source-map | + | o | yes | transformed code (lines only) |
cheap-module-eval-source-map | o | ++ | no | original source (lines only) |
cheap-module-source-map | o | - | yes | original source (lines only) |
eval-source-map | – | + | no | original source |
source-map | – | – | yes | original source |
nosources-source-map | – | – | yes | without source content |
这里我用了一个source-map
,代码及执行的效果是这样的:
module.exports = {
devtool: 'source-map',
entry: __dirname + "/app/main.js",文件
output: {
path: __dirname + "/",
filename: "bundle.js"
}
}
依然还是执行
webpack
慢慢的会发现,每次我修改完代码都要重新手动刷新一下,在实际的生产和开发中,不可能每改一处都要手动刷新,这样既做了重复繁琐且无意义的工作,也会是开发效率降低。所以这时候就要用到devserver,他会实时的监视文件的变化并刷新,但是并不同于之前的devtool
,devserver是一个插件,首先要手动安装一下,才可以使用。
执行以下命令:
npm install --save-dev webpack-dev-server
然后,就可以使用了,先看一下代码:
module.exports = {
devtool: 'source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/",
filename: "bundle.js"
},
devServer: {
contentBase: "./",
compress: true,
port: 9000,
colors: true,
historyApiFallback: true,
inline: true
}
}
contentBase
:服务器加载页面的位置;
compress
:是否使用gzip压缩;
port
:指定端口;
historyApiFallback
:当使用HTML5 History API的时候,如果出现404的页面,都将跳转到index.html
页面;
inline
:为true使用inline mode
,false则使用iframe mode
。
注:存在两种自动刷新方式,分别为inline mode
和iframe mode
,两种方法具体的区别可以看这里,这篇文章写得还是比较详细的。
3.loaders
loaders是webpack很重要的部分,但是每个需要使用的loaders都需要单独安装,而且有的loaders配置简单,有的则比较复杂一些。
这里举一个有关CSS的例子:
3.1 安装css所需的loaders:
npm install --save-dev style-loader css-loader
css-loader
使你能够使用类似@import 和 url(…)的方法实现 require()的功能;
style-loader
将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中
3.2 使用css-loader
module.exports = {
devtool: 'source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'//对样式表的处理
}
]
},
devServer: {
contentBase: "./",
compress: true,
port: 9000,
colors: true,
historyApiFallback: true,
inline: true
}
}
其他的loaders都是一样的套路,先安装,然后配置,接着就可以使用了。
4.plugins
插件(plugins)可以扩展webpack的功能,使用流程跟loaders差不多。
4.1 安装
npm install --save-dev html-webpack-plugin
每个插件都有不同的功能,这个
4.2 使用plugins
waiting……