一、webpack简介
随着前端的项目越来越庞大复杂，js代码不再像过去那样简单，而是变得十分庞大，特别是当单页应用的出现，一个前端的项目可能需要大量的模块来支持，这就导致你的项目的代码文件的会非常的多，这个时候项目初次加载性能方面肯能会比较差，这个时候就需要使用一些优化手段，比如说webpack打包。
二、webpack全局安装
- 安装webpack之前需要准备一下ndoe的环境，以及npm包管理工具
- 当上面两项准备好之后就可以开始安装webpack了在cmd中输入
npm install -g [email protected] - 安装好之后输入
webpack -v就会显示版本号 - 这样就安装完毕了！
三、webpack局部安装（推荐使用这个！！！）
- 打开cmd输入npm init
- 之后会有这么几个东西弹出来
- 项目名称
- 项目版本号
- git仓库
- 关键字
- 作者
- 许可
- 创建package.json
我们之前在cmd中输入的一些内容就在这里了，作者、版本号、描述都可以在这里进行修改。
然后我们就可以开始局部安装webpack了在项目文件的cmd中输入npm i -s-dev [email protected]就可以了安装成功后我们会在package.json中看到这么一段代码
如果安装报错那么注意三个问题
- 看看你node的版本是否过低如果你的node的版本在6以下那么请先更新以下你的node的版本到6以上。
- 网络问题，有的地区的网络屏蔽掉了npm的网址所以安装不成功，解决方法就是去使用淘宝镜像cnpm。网址：https://npm.taobao.org/ 这个里面有安装方法。
- 再有就是操作系统的权限问题如果你的系统的权限不是管理员权限的话会出现安装失败的情况。
四、建立基本的webpack项目结构
当我们上面的安装步骤完成之后我们的项目的目录会变成这样：
在开始创建我们的项目之前我们先来安装一个插件live-server安装方法如下：
打开cmd在其中输入npm i -g live-server这个是安装全局的live-server。
那么接下来就可以开始我们项目的构造了：
- 首先在项目中创建两个文件夹，一个叫src用来存放源文件，一个叫dist用来存放打包之后的项目文件
- 那么接下来我们在dist文件夹中创建一个文件叫index.html的文件里面引入一个bundle.js文件
"en"> "UTF-8">Document "a">复制代码 - 然后在src文件夹中创建一个叫main.js的文件作为webpack打包的入口文件内容的话随意写一下输出一个‘你好webpack’
document.getElementById('a').innerHTML='你好webpack
'复制代码 - 接下来就是打包的关键步骤了打开cmd切到项目的文件夹下输入这样一行命令
//简单的解释一下这个命令就是将src下的main.js文件打包到dist下打包后的文件名叫bundle.js webpack src/main.js dist/bundle.js 复制代码 - 接下来就是使用我们一开始安装的插件了live-server在cmd中输入live-server就会自动创建一个服务器并且打开浏览器这个时候我们可以再浏览器上看到一个目录
打开dist，就可以看见你好webpack
到这里我们的webpack项目已经搭建完毕也首次的打包好了我们的项目。
五、通过配置的方法来进行webpack的打包
上面的一通操作虽然也是将我们的项目成功的打包，但是操作的方式很麻烦，但是在真正的项目项目中是不会使用这种方法来打包，太low了不够酷炫，接下就使用一个酷炫的方法来进行打包，那就是通过配置文件的方法来进行打包。
但是如果我们想要玩这个操作的话首先得会一点node的知识，就是node的核心模块的使用，不需要知道的太多只需要知道怎么导入核心模块，然后path这个具名模块有什么用就行了。
- 首先我们接着在上面的项目的根目录下创建一个文件叫webpack.config.js内容如下
//引入node的path模块，path这个模块其实也就是取到文件的路径进行各种操作const path=require('path');module.exports={ //项目入口 entry:{ //这里的entry的内容就是你的入口文件的文件路径 entry:'./src/main.js' }, //出口 output:{ //这里的path的这个方法是获取文件的绝对路径 //这个__dirname是node的一个全局变量他的作用就是存储文件所在目录的完整路径 //这样做是为了方便项目的开发 path:path.resolve(__dirname,'dist'), //这filename就是打包后的文件名称 filename:'bundle.js' }}复制代码 - 以上步骤完成之后就可以再cmd中直接输入webpack这个指令就可以进行打包啦！最后的效果和之前的效果是一样的。
如果说这个配置的打包方式就只有这个功能的话，那可能还体现不出来它的优势那么接下来的的这个操作就可以明显体现出它的优势了，如果说我想要一次打包多个文件呢？
- 还是接着上面的项目继续去写，在webpack.config.js文件中去进行修改
//引入node的path模块 const path=require('path');module.exports={ //项目入口 entry:{ //这里的entry的内容就是你的入口文件的文件路径 //这里的 main:'./src/main.js', main1:'./src/main1.js' }, //出口 output:{ path:path.resolve(__dirname,'dist'), //这filename使用[name].js就是设置打包好之后的文件和入口文件路径所设置的名字同名 filename:'[name].js' }}复制代码 - 然后去写一个main1.js内容就写一个弹框alert('你好啊！')
- webpack打包
六、webpack-dev-server服务器配置
上面的项目我所使用的服务器是live-server这个服务器，其实webpack自己是有服务器的这个服务器，而且非常方便与开发，因为他支持热部署，接下来我来介绍一下这个怎么使用。
安装webpack-dev-server
打开cmd切换到项目输入npm install [email protected] --save-dev注意我这里是选择了版本的，如果你不去写版本的话，他会直接给你安装webpack4的webpack-dev-server，这个和webpack3是完全不同，webpack4和webpack3完全不一样，虽然都是webpack。
使用webpack-dev-server
你如果想要使用webpack-dev-server那么你首先得有webpack.config.js这个webpack的配置文件，我接下来的内容是接着上面的项目继续改造的。
你需要在webpack.config.js添加上devServer这个对象
//引入node的path模块 const path=require('path');module.exports={ //项目入口 entry:{ //这里的entry的内容就是你的入口文件的文件路径 //这里的 main:'./src/main.js', main1:'./src/main1.js'
}, //出口 output:{ path:path.resolve(__dirname,'dist'), //这filename使用[name].js就是设置打包好之后的文件和入口文件路径所设置的名字同名 filename:'[name].js' }, module:{}, plugins:[], devServer:{ //你所需要服务的项目的更新 contentBase:path.resolve(__dirname,'dist'), //服务器ip地址 host:'192.168.5.100', //服务器压缩 compress:true, //项目端口号 port:8080 }}复制代码这样就算是把配置文件写好了接下来就是需要在package.js中去写一下命令因为你直接在cmd中去输入命令webpack-dev-server是没有用的在scripts中配置一下你
package.json
{ "name": "webpacktest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "server": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.6.0", "webpack-dev-server": "^2.8.2" }}
复制代码最后在cmd中去输入命令npm run server,这样webpack-dev-server服务器就动了！
注意：webpack-dev-server虽然支持热部署但是你需要注意下你的webpack的版本，如果你的版本是3.6.0一下的那么webpack-dev-server是不支持热部署的。
这个暂时就先到这里，下一篇内容主要就是项目中常用的一些操作了！