玩转webpack3.x之入门篇

时间 2019-12-06

标签 webpack3.x webpack 入门繁體版

原文原文链接

1、webpack简介

随着前端的项目愈来愈庞大复杂，js代码再也不像过去那样简单，而是变得十分庞大，特别是当单页应用的出现，一个前端的项目可能须要大量的模块来支持，这就致使你的项目的代码文件的会很是的多，这个时候项目初次加载性能方面肯能会比较差，这个时候就须要使用一些优化手段，好比说webpack打包。html

2、webpack全局安装

安装webpack以前须要准备一下ndoe的环境，以及npm包管理工具
当上面两项准备好以后就能够开始安装webpack了在cmd中输入npm install -g webpack@3.3.5
安装好以后输入webpack -v就会显示版本号
这样就安装完毕了！

3、webpack局部安装（推荐使用这个！！！）

打开cmd输入npm init
以后会有这么几个东西弹出来

项目名称
项目版本号
git仓库
关键字
做者
许可
建立package.json

上面这一套组合结束以后咱们的项目中会出现这么一个文件package.json
咱们以前在cmd中输入的一些内容就在这里了，做者、版本号、描述均可以在这里进行修改。前端
而后咱们就能够开始局部安装webpack了在项目文件的cmd中输入npm i -s-dev webpack@3.6.0就能够了安装成功后咱们会在package.json中看到这么一段代码 node
若是安装报错那么注意三个问题webpack

看看你node的版本是否太低若是你的node的版本在6如下那么请先更新如下你的node的版本到6以上。
网络问题，有的地区的网络屏蔽掉了npm的网址因此安装不成功，解决方法就是去使用淘宝镜像cnpm。网址：https://npm.taobao.org/ 这个里面有安装方法。
再有就是操做系统的权限问题若是你的系统的权限不是管理员权限的话会出现安装失败的状况。

4、创建基本的webpack项目结构

当咱们上面的安装步骤完成以后咱们的项目的目录会变成这样：git

在开始建立咱们的项目以前咱们先来安装一个插件live-server安装方法以下：web

打开cmd在其中输入npm i -g live-server这个是安装全局的live-server。npm

那么接下来就能够开始咱们项目的构造了：json

首先在项目中建立两个文件夹，一个叫src用来存放源文件，一个叫dist用来存放打包以后的项目文件

那么接下来咱们在dist文件夹中建立一个文件叫index.html的文件里面引入一个bundle.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="a"></div>    <script src="bundle.js"></script>
</body>
</html>
复制代码

而后在src文件夹中建立一个叫main.js的文件做为webpack打包的入口文件内容的话随意写一下输出一个‘你好webpack’
```
document.getElementById('a').innerHTML='<h1>你好webpack</h1>'复制代码
```

接下来就是打包的关键步骤了打开cmd切到项目的文件夹下输入这样一行命令

//简单的解释一下这个命令就是将src下的main.js文件打包到dist下打包后的文件名叫bundle.js
webpack src/main.js dist/bundle.js
复制代码

接下来就是使用咱们一开始安装的插件了live-server在cmd中输入live-server就会自动建立一个服务器而且打开浏览器这个时候咱们能够再浏览器上看到一个目录
打开dist，就能够看见你好webpack浏览器
到这里咱们的webpack项目已经搭建完毕也首次的打包好了咱们的项目。bash

5、经过配置的方法来进行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打包

6、webpack-dev-server服务器配置

上面的项目我所使用的服务器是live-server这个服务器，其实webpack本身是有服务器的这个服务器，并且很是方便与开发，由于他支持热部署，接下来我来介绍一下这个怎么使用。

安装webpack-dev-server

打开cmd切换到项目输入npm install webpack-dev-server@2.8.2 --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是不支持热部署的。

这个暂时就先到这里，下一篇内容主要就是项目中经常使用的一些操做了！