webpack已经更新到了版本4，关于版本的问题，相信很多小伙伴们在学习的时候碰到好多坑，本篇文章是基于webpack2的教程进行学习的，但是尽可能的使用webpack4的语法学习，于是不免出现纰漏，或者出现混杂，如有问题，请及时解决。
10.1前端工程化与webpack
通常，前端自动化（半自动化）工程主要解决以下问题：
- javaScript CSS代码的合并与压缩
- CSS预处理：Less、Sass、Stylus的编译
- 生成雪碧图（CSS Sprite）
- ES6转ES5
- 模块化
……
如果熟悉Gulp，我们知道经过Gulp合并压缩后的代码仍然是你写的代码，只是局部变量名被替换，一些语法做了转换而已，整体内容并没有发生变化。而我们要学习的webpack，打包后的代码已经不只是你写的代码了，其中夹杂了很多webpack自身的模块处理代码。因此，webpack最难的是理解“编译”这个概念。
在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。
webpack的主要适用场景是单页面富应用（SPA)。SPA通常是由一个html文件和一堆按需加载的.js组成，它的html结构可能会非常简单。
在进行webpack的学习之前，我们先来学习两个ES6中的语法：export和import。
export和import是用来导入和导出模块的，一个模块就是一个js文件，他拥有独立的作用域，里面定义的变量外部是无法访问的，因此需要使用export导出。
模板导出后，在需要使用模块的文件使用import导入。
export与import海洋其他的用法，这里不做详细介绍。
10.2 webpack基础配置
10.2.1 安装webpack、webpack-cli与webpack-dev-server
在安装webpack前，先确保已经安装了最新版的Node.js和NPM，并且了解NPM的一些基本用法。
- 首先，创建一个目录，比如demo，使用NPM初始化配置。
npm init
- 执行后，会有一系列选项，可按回车键快速确认 ，完成后会在demo目录生成一个package.json的文件。之后在本地局部安装webpack：
npm install webpack --save-dev
- --save-dev会作为开发依赖来安装webpack。安装成功后，在package.json中会多一项配置：
"dependencies": {
"webpack": "^4.17.2"
}
4.接着需要安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等，配置起来也很简单。同样，在本地局部安装：
npm install webpack webpack-dev-server --save-dev
安装完成后，最终的package.json文件内容为：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.2",
"webpack-dev-server": "^3.1.7"
}
}
10.2.2就是一个js文件而已
接下来需要了解webpack的一些核心概念。
归根到底，webpack就是一个.js文件，你的架构好或差都体现在这个配置上，随着需求的不断出现，工程配置也是逐渐完善。
1.首先，我们在目录DEMO下创建一个js文件：webpack.config.js，并初始化它的内容：
var config= {
//这里的module.exports相当于export default config.由于目前还没安装支持ES6的编译插件，因此不能直接使用ES6的语法。
};
module.exports=config;
2.然后在package.json的scripts里增加一个快速启动webpack-dev-server服务的脚本：
{
//……
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --config webpack.config.js"
},
//……
TIPS:由于我们这里安装的是webpack4，所有这里需要安装webpack-cli，才可以继续下一步，但是这里学习的是webpack2，所以我们不作为一个步骤，安装webpack4的小伙伴，继续在命令行中执行：npm install webpack-cli
3.当运行npm run dev命令时，就会执行webpack-dev-server --open --config webpack.config.js命令。其中，--config是指向webpack-dev-server读取的配置文件路径.
--open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1：8080,不过IP和端口都是可以配置的，比如：
{
//……
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --host 192.168.199.102 --port 8888
--open --config webpack.config.js"
},
//……
webpack配置中组主要的也是必选的两项是入口（Entry）和出口（Output）。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，出口则是用来配置编译后的文件存储位置和文件名。
在demo目录下新建一个空的main.js作为入口的文件，然后再webpack.config.js中进行入口和输出的配置(webpack4的配置)：
const path=require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
module.exports={
entry:'./src/main.js', //入口文件为main.js
output:{ //输出
path:path.resolve(__dirname,'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
filename:'bundle.js' //输出的文件名
},
};
在终端里执行命令webpack后，不出意外的话终端里显示如下就表示成功了
success.jpg
同时看一下文件结构目录，多了一个dist文件夹，以及bundle.js文件。这两个就是webpack打包生成的文件，如下：
bundle.jpg
在index.html文件里引入bundle.js文件后，用浏览器打开index.html（或者执行完webpack后，执行npm run dev，然后打开IP地址），可以看到页面里有内容了。这就代表我们已经使用webpack打包了一个文件，它的基本用法已经跑了。
<body>
<div id="box"></div>
<script src="dist/bundle.js"></script>
</body>
这里一定要注意引用的bundle.js一定要在div下面引用，如果在<head>中引用，会报错！
10.2.3语法及步骤
语法
一.
entry入口文件
只打包一个文件（单入口），写个字符串
把多个文件打包成一个文件，写个数组
把多个文件分别打包成多个文件，写成对象
webpack把打包后的文件叫Chunck
二.output出口文件
1.filename输出文件的名称
①、输出一个文件，写个字符串
②、输出多个文件，文件名前面加个标识符（id/name/hash）
2.path输出文件的路径
①、路径必需为绝对路径
②、__dirname是nodejs里的一个模块，表示当前文件的绝对路径
③、path为nodejs的系统模块，直接引入后调用path.resolve(__dirname,'输出文件的路径');
步骤
当我们在终端里输入webpack命令的时候webpack会按以下的步骤开始工作
1.先打开根目录下的
webpack.config.js
2.找entry（入口）属性的值
3.进入到main.js里，看到它又依赖show.js，再找到show.js
4.把main.js与show.js合并成一个js文件
5.在webpack.config.js里找到output（出口）属性
6.解析output里的path与filename属性的值
7.把第4步合并成的js文件放到dist文件夹里，并起个名字叫bundle.js
10.2.4 Plugin
下面就以这个html-webpack-plugin插件为例，给大家演示插件的用法。这个插件的作用是用来自动生成html页面，既可以生成单个页面又可以生成多个页面，并且在生成前你可以给它一堆的配置，它会按照你想要的生成方式去生成页面。
第一步：安装
npm i html-webpack-plugin -D
第二步：在webpack.config.js里引入模块
const HtmlWebpackPlugin=require('html-webpack-plugin');
第三步：在plugins里new一个
plugins:[
new HtmlWebpackPlugin()
]
此时webpack.config.js的内容如下：
const path=require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //入口文件为main.js
output:{ //输出
path:path.resolve(__dirname,'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
filename:'bundle.js' //输出的文件名
},
plugins:[
new HtmlWebpackPlugin()
]
};
第四步：在终端里执行命令webpack，如果不出意外的话是下面这样：
index.jpg
未完待续，明天我们接着来webpack！
网友评论