webpack
Posted mycode1990
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack相关的知识，希望对你有一定的参考价值。
什么是WebPack？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
这段话有三个重点：
打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。 我们可以从下图再次了解一下WebPack的作用:
安装WebPack
看了这么久，一定着急动手作一作了。要使用WebPack就要先进行安装，就和你要使用微信，必须在手机上下载微信的APP一样，但是不同的是WebPack的安装，采用的是命令行npm形式的安装。
这里我以windows系统为例，给大家做截图示范。苹果安装稍有不同，不过大同小异（如果有问题，可以直接进群交流，进群方法看文章开头）。
具体安装方法：
用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码：
mkdir webpack_demo
cd webpack_demo
第一句是建立一个文件夹，第二句是进入这个文件夹。这个文件夹就是我们的项目文件目录了，文件夹建立好后，可以通过下面命令安装WebPack。
需要注意的是,你在执行下一步时必须安装node，可以通过 node -v来查看node安装情况和版本，如果没有安装，要先安装node才可以继续进行。
//全局安装
npm install -g webpack
如果你这时安装失败了（出现了报错信息），一般有三种可能：
检查你node的版本号，如果版本号过低，升级为最新版本。 网络问题，可以考虑使用cnpm来安装（这个是淘宝实时更新的镜像）,具体可以登录cnpm的官方网站学习http://npm.taobao.org/。 权限问题，在Liux、Mac安装是需要权限，如果你是Windows系统，主要要使用以管理员方式安装。 注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
对项目目录进行安装
全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。
在命令行输入：
npm init
输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。
输入下面命令进行项目目录的安装：
npm install --save-dev webpack
这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。
开发环境and生产环境：
开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。 生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。 查看webpack版本
你安装好后，会想知道你现在webpack版本，在工作中交流时，也会经常问到你，你的打包版本是什么？这时候我们可以用下面的命令进行查看。
webpack -v
可以看到我现在的版本的3.6.0版本，这是目前（2017/9/16）最新的版本了。出现了版本号，也说明你的webpack安装成功了。
看到这里，我们第一节的内容就完成了，我建议你停一下，把webpack安装到你的电脑上，再进行向下观看，如果在安装时遇到什么问题，可以在下方的留言区给我留言。
###第02节：让你快速上手一个Demo
上节课已经安装好了Webpack到电脑上，这节课就开始一个简单的Demo，让你快速上手和熟悉Webpack的基本用法，学习并作完这节课内容你就可以和朋友小吹一下说：我也会Webpack。
建立基本项目结构
首先进入上节课我们建立的webpack_demo目录（每个人建立的位置不同，可能建立在了D盘或者E盘）。进入后在根目录建立两个文件夹，分别是src文件夹和dist文件夹：
src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。 dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。 你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。
编写程序文件：
文件夹建立好后，我们在dist文件下手动建立一个index.html文件，并写入下面的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jspang webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。
document.getElementById(‘title‘).innerHTML=‘Hello Webpack‘;
这个文件的代码很简单，就是在
标签里写入Hello Webpack这句话。
第一次Webpack打包
Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：
webpack {entry file} {destination for bundled file}
{entry file}:入口文件的路径，本文中就是src/entery.js的路径； {destination for bundled file}:填写打包后存放的路径。 注意：在命令行中是不需要写{ }的。 在我写的例子中，终端执行命令如下：
webpack src/entry.js dist/bundle.js
执行的结果如下图：
命令执行成功后，会在dist目录下出现bundle.js文件，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。
总结：
从这个Demo中你会了解到webpack的基本用法和使用过程，并会了命令行打包的方法。在这节文章的最后，我还是要强调，你一定要把本节内容在自己的电脑上敲一遍，这样你才能深入了解。
###第03节：配置文件：入口和出口
首先要说明的是：学习这节课前，务必作完上节课的代码，否则你会学的一脸懵逼。
上节课通过一个小Demo我们对Webpack有了初步了解，但是上节课的终端打包方案，在实际开发中并不使用，而是使用Webpack的配置文件的方式进行设置。这节课我们就学一下配置文件的大体结构和入口出口文件的配置。
配置文件webpack.config.js
webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。
webpack.config.js
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
entry：配置入口文件的地址，可以是单一入口，也可以是多入口。 output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。 module：配置模块，主要是解析CSS和图片转换压缩等功能。 plugins：配置插件，根据你的需要配置不同功能的插件。 devServer：配置开发服务功能，后期我们会详细讲解。 entry选项（入口配置）
这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS…..）。按照上节课的代码(如果你上节课的代码还没作，那你可以返回去重新作一下)，这里要填写的是src目录下的entery.js文件。
wepback.config.js中的entry选项
//入口文件的配置项
entry:{
//里面的entery是可以随便写的
entry:‘./src/entry.js‘
},
output选项（出口配置）
出口配置是用来告诉webpack最后打包文件的地址和文件名称的。按照上节课的操作，应该打包到dist目录下。在编写出口文件时，我们需要用到一点Node的知识，如果你还不会Node也没有 关系，就简单的两句代码，你记住就可以了（在视频中我还有详细的讲解）。
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,‘dist‘),
//打包的文件名称
filename:‘bundle.js‘
},
如果你只这样写，是会报错的：找不到path这个东西。所以我们要在webpack.config.js的头部引入path，代码如下：
const path = require(‘path‘);
这里我们使用了const，这是ES6的语法，如果你对ES6还不熟悉，也可以看技术胖ES6的课程哦（http://jspang.com/2017/06/03/es6/）。
其实path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。如果你还是不理解，我会在视频中给你进行演示。
filename:是打包后的文件名称，这里我们起名为bundle.js。
现在webpack.config.js的代码：
const path = require(‘path‘);
module.exports={
//入口文件的配置项
entry:{
entry:‘./src/entry.js‘
},
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,‘dist‘),
//输出的文件名称
filename:‘bundle.js‘
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
这个代码写完后，可以在终端中直接输入webpack就会进行打包。
以上是关于webpack的主要内容，如果未能解决你的问题，请参考以下文章
Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段
报错：✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段
报错：✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段