0、准备工作
- 1、下载nodeJS>> NodeJS官方网站
- 2、下载Git>> Git官网
下载完node.js之后根据安装提示一步步安装即可,node.js的兴起带来了一款叫做npm的包管理器
webpack模块可以被npm包管理器安装
安装webpack
//在全局安装webpack使用以下命令。
$ npm install -g webpack
webpack已经安装到计算机上,现在可以使用webpack命令了。
1、在项目中使用webpack
使用以下命令在项目根目录下生成package.json文件
$ npm init
使用sublimetext编辑器打开package.json文件应该是这个样子的。
2、安装webpack到项目中
将webpack加入到pageage.json配制文件中,使用以下命令
$ npm install --save-dev webpack
此时再看package.json文件,对比package.json刚刚创建时,新增加了一段代码。
"devDependencies": {
"webpack": "^1.13.2"
}
webpack依赖模块已经配置到我们的项目中了,并且项目目录中新增了一个node_modules的文件夹,打开文件夹可以看到我们刚刚安装的webpack模块。
3、webpack的版本
目前有两个可用的webpack版本,分为标准和测试版,测试版使用-beta标记区分。测试版包含不稳定和带有实验性质的特征,并且没有全面的测试。所以你应该使用标准版的webpack。
//后缀版本号安装相应版本
$ npm install webpack@1.2.x --save-dev
4、开发工具
webpack-dev-server模块能快速配置一个本地的服务器,并且当每次保存修改过的代码后,测试服务器将立即自动刷新页面,省去了每次都要手动打包编译代码和刷新页面的的麻烦。
$ npm install webpack-dev-server --save-dev
5、配置webpack.config.js文件
接下来就小试牛刀,使用使用webpack做一个非常非常简单的操作。
-
首先在项目根目录下新建两个文件夹,一个叫app,用来存放为打包前的源代码;另一个目录就叫dist,用来存放webpack打包输出后的文件。
-
接着,在dist文件夹中新建一个html文档,我命名为index.html,并搭建好html文档的基本结构。
-
之后,我们在app文件夹中新建一个js文件,命名为data.js,使用module.exports暴露一个接口。
-
之后,新建一个index.js的文件,将data.js文件引入进来,编写javascript脚本将数据渲染到页面上。
-
之后我们来配置webpack.config.js文件,将app文件夹中的index.js文件及其所有的依赖文件(目前只有data.js)打包编译成一个压缩的javascript文件。在项目根目录新建一个命名为webpack.config.js(webpack配置文件的默认写法,当然也可以自定义,后续再说。),开始写配置项。
-
webpack.config.js配置文件写好之后,在项目根目录打开git命令行面板,输入webpack,此时dist文件夹中就生成了webpack.config.js文件中定义的index.bundle.js输出文件了。
-
不要忘了我们的冷落了半天的index.html,在html文档的末尾添加javascript文件引用,引用刚刚新鲜出炉的index.bundle.js文件到index.html中。
5、详解webpack.config.js配置
· 使用命令行配置
如果使用命令行工具(如git),命令行默认将读取webpack.config.js文件来打包源文件
//当在命令行输入webpack时,默认使用webpack.config.js文件配置
$ webpack
当然我们也可以自定义webpack的配置文件,如果使用自定义配置文件,可以这样写。
//使用自定义的webpack配置文件
$ webpack --config webpack.config_test.js
//--config选项告诉webpack使用webpack.config_test.js作为配置文件
那么,这个配置文件结构是怎么样的呢?
//webpack.config.js
module.exports = {
//这里填写配置项
}
从上面代码可以发现,webpack.config.js文件输出了配置对象。
· 使用node.js API配置
如果我们使用node.js API,我们就需要通过参数来传递配置对象,如下代码。
webpack({
//配置项在这里填写
},function(){
//回调函数
})
· 更复杂的配置项
//在命令行中编译文件使用如下命令
$ webpack app.js app.bundle.js
上方命令执行后,将把app.js编译成app.bundle.js文件
使用命令行的缺点就是我们每次要编译编写的代码时,都要写这么长的命令,如果我们设置妥当的webpack.config.js配置文件,那么webpack可以监听文件改变,自动的执行编译打包命令
//监听文件改变,自动编译
$ webpack -w
· 配置文件怎么写?
首先我们必须清楚,一提到配置文件,并不一定严格按照json格式编码,所以我们不需要写非常纯正的JSON语法到配制文件中,只需要使用Javascript语法即可,因为它只是node.js的一个模块
下面是一个非常简单的配置对象例子:
{
context: __dirname + "/app",
entry: "./entry",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
}
}
-
context
上下文选项用来决定根目录(即绝对路径)的入口文件
-
entry
打包文件的入口点。
1、如果我们给entry复赋值一个字符串:这个字符串将会在开始编译的时候被加载。
entry: "./app.js"
2、如果我们给entry赋值一个数组:这个数组中的所有模块在编译启动时都将被加载,对后一个数组元素将被输出。
entry: ["./entry1.js","./entry2.js"]
3.如果我们给entry赋值一个对象,那么我们就创建了多个入口的绑定,对象的“键”名可以在output中使用name获取到,“值”可以是一个字符串也可以是一个数组。
{ entry:{ page1: "./page1.js", page2: ["./entry1.js","./entry2.js"] }, output:{ filename: "[name].bundle.js", chunkFilename: "[id].bundle.js" } }
-
output
output选项告诉webpack如何编译文件到硬盘中,值得注意的是,虽然entry中可以使用一个对象传入多个入口点文件,但是只能给ouput设置一个配置项
output.filename
这里定义了输出的文件名,谨记只能填写文件名,不能包含目录。
output.path
这个选项告诉webpack要把编译后的文件输出到硬盘的什么位置上,filename被用来确保输在这个目录中的文件是独一无二的。
单入口文件的写法
{ entry: "./src/app.js", output: { path: "./bulit" filename: "bundle.js" } }
多入口文件的写法
{ entry: { app: "./src/app.js", search: "./src/search.js" }, output:{ filename: "[name].js", path: __dirname + "/built" } }
-
output.publicPath
publicPath用来指定输出文件的公共URL地址,当我们在浏览器浏览的时候需要配置它
//config.js output:{ path: "/home/proj/public/assets", publicPath: "/assets/" } //index.html
以上就是webpack最长用的配置项,下面是更高级的配置,比如使用ES6(ES2015)的语法需要配置babel-loader,在js中引入css样式文件如要style-loader、css-loader,开发react应用需要配置react加载器等等。
下载loaders加载器
下面是开发基于react的webapp时需要配置的项。
首先要用npm下载这些模块们
//下载babel-loader模块
$ npm install --save-dev babel-loader
//下载babel-preset-es2015,这样确保babel能解析ES6的最新特性
$ npm install --save-dev babel-preset-es2015
//下载react模块
$ npm install -save-dev react
//下载babel-preset-react,babel才能解析react的语法特性
$ npm install --save-dev babel-preset-react
<<<babel官网>>>
Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。Babel是所有ES6转换编译器中与ES6规范兼容度最高的,甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6的所有新特性,而且不会影响与老版本浏览器的兼容性。此外,它还支持许多不同的构建测试系统,使开发者很容易将它集成到自己的工具链中。
在webpack.config.js中配置loaders
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
query:{
presets:['es2015','react']
}
}
]
},
这样我们就能借助webpack这个神奇的工具专注于webapp开发本身,而不必为其他不必要的琐事搅扰~