前言:
需要掌握npm包管理工具的使用,最好掌握NodeJs的基本使用,如果还没了解过建议先去看30、NodeJS/NodeJs.doc文档入门
1、先新建一个空白文件夹,命名为webpack
2、cmd中进入刚刚新建的webpack文件夹
3、全局安装webpack
4、安装依赖到项目目录
5、查看此时文件目录(cmd查看即可)
6、开始配置项目初始化
在项目目录中进行项目初始化,初始化完成将自动创建一个pageage.json文件
可以在编辑器中查看pageage.json的信息,发现就是刚才的初始化信息
7、手动创建文件
在项目根目录中创建两个空白文件夹app和public,然后再在app文件夹里面创建两个js文件(main.js和Greeter.js),在public中创建一个html文件(index.html)
8、编辑index.html代码(简单)
注意此时app.bootstrap.js文件是不存在,我们的目标是打包生成该文件
9、编辑Greeter.js(返回一个dom元素)
10、编辑main.js(加载Greeter.js)
11、使用webpack打包文件(手动打包)【第一种】
我们需要根据main.js文件,把所需文件(自动查找所需文件)打包成app.bootstrtap.js文件,所以先进入文件根目录,再把目标文件打包到目标路径
查看文件可以看到生成的目标文件
12、查看inde.html
既然完成了打包,那么去看一下效果,直接在浏览器中打开index.html(如果需要服务器环境,可以使用vs2010的查看,更可以用nodejs启动服务器)
可以查看到效果,打包无误
13、查看打包文件片段
14、通过webpack.config.js打包(通过配置文件方式)【第二种】
当项目比较简单的时候手动打包还可以,当项目复杂的时候手动打包会比较麻烦,下面介绍如何通过配置文件的方式进行打包
为了说明情况,这时候可以把前面打包成的app.bootstrtap.js文件删除。我们先在项目根目录创建的一个配置文件webpack.config.js
配置文件内容如下:
接下来就是重头戏,以前手动打包是webpack入口文件 目标文件,现在变得简单,只需要webpack即可,图示如下
是不是很方便了,接下来会发现目标文件已经生成,index.html可以运行(重复12、13步骤)
15、通过pageage.json进行打包【第三种】
类似于第二种打包方式,只需要在pageage.json文件中的scripts中添加start属性,并设置它的值为webpack,即使用npm start命令就等价于webpack命令。
标准写法应该是npm run start
npm run start指向webpack命令(前提是配好webpack.config.js)
16、生成source map
Webpack在打包时可以为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。配置时在webpack.config.js下添加devtool配置项,其可选内容如下:
devtool选项 配置结果
source-map : 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度;
cheap-module-source-map: 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;
eval-source-map: 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项;
cheap-module-eval-source-map: 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点;
打包并生成source map
17、使用webpack构建本地服务器(也可以使用anywhere)
如果使用过Nodejs或者vue脚手架,那你应该很明白构建本地服务器是什么意思,如果不知道,我们也可以基于nodejs构建一个webpack的本地服务器。
首先先安装webpack-dev-server组件
如果抛警告说需要repository字段,可以在pageage.json中对应添加上去,"repository": {"type": "git","url": "http://baidu.com"}
不过我们这个是私有项目,直接添加private配置项,并设置其值为布尔值true即可
打开node_modules文件夹,可以看到已经下载完成
接下来在webpack.config.js配置服务信息
添加devServer配置项
启动服务(直接启动方式)
启动的命令有很多,这里介绍简单的webpack-dev-server --inline
停止服务时ctrl+c即可
启动服务(npm方式)
除了输入原始命令行,我们也可以自定义命令。先在pageage.json中做一下修改即可
如果已经启动服务,先停止服务(ctrl+c)
npm run server
和直接启动服务效果一样
查看效果
通过配置我们知道,服务监听的端口是8080,资源为项目根目录下的public文件夹,在浏览器中输入http://127.0.0.1:8080/
18、安装并使用Loaders
使用不同的loader,webpack就可以对对应的文件进行转换。先介绍如何进行json转换。
和webpack-dev-server一样,我们要安装json-loader
查看文件,安装完成
在webpack.config.js下配置模块信息
添加module配置项,并添加模块loaders(注意loaders是一个数组,可以添加多个loader)
新建json文件
既然是json-loader,那么就需要有源json文件被处理,我们可以把Greeter.js里面的文本信息提取出来
新建welcome.json文件,专门放信息
修改Greeter.js
至此,json-load安装配置完成,接下来打包项目并启动服务
打包并启动服务