博文介绍：拒绝做CV前端
1. 我们平时都是使用 vue-cli 脚手架快速搭建项目（vue-cli 基于 webpack），可是我们不知道其中的原理与细节，导致我们在遇到一些细节问题无法自己配置解决。
2. 为了让我们能更好的了解 vue-cli 实现过程，我们需要学习使用 webpack 从一个 index.html 文件从零开始创建一个完整的项目（包含 babel、样式预处理器、vue、webpack插件、dev-server、proxy代理等.
目录：
1.1 安装 webpack ：（需要 node 环境）Node.js
2.3 webpack.config.js (webpack) !
4.2 css-loader、style-loader、less-loader
4.3 file-loader、url-loader （webpack 4）
4.4 asset-module（资源模块），webpack 5
6.2. 基本使用方法 和 clean-webpack-plugin 插件
7.3.4. 自行配置端口号（port）和主机名 （hostname）
1. 什么是 webpack ?
我们先听一句官方的话：
1. webpack 是一个开源的前端打包工具。webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。
2. 要使用 Webpack 前须先安装 Node.js。Webpack 其中一个特性是使用加载器来将资源转化成模块。开发者可以自定义加载器的顺序、格式来因应项目的需求。
小例子初识 webpack
1. 我们在 index.html 里导入 index.js
2. 再在 index.js 里从 js 文件夹导入 sayHello.js
为了支持这种模块化写法就需要 webpack 来打包这个文件
1.1 安装 webpack ：（需要 node 环境）Node.js
终端命令：npm i webpack -g ( 全局安装 webpack )
此时注意我们需要再安装一个 webpack-cli ，npm install webpack-cli -g
执行 webpack -v 查看是否安装成功
1.2 使用终端命令 webpack
首先打开终端，直接使用命令 'webpack' 就可以进行打包。
3. 打包后的文件会生成一个 dist 文件夹，放在项目根目录下，里面放着一个被打包好的 main.js 文件。main.js 如下：
1.3 引入使用打包好的文件
在 index.html 文件里引入 dist/main.js
2. 了解 node、webpack 的配置文件 ！
2.1 package.json (属于node)
～1. 什么是 package.json，这是一个包含项目名称、打包入口（main）、所需的依赖包的版本的配置文件，我们可以自己在根目录新建，也可以在终端输入 npm init ( 或者 npm init -y 这是一种简单的写法,可以直接生成如下配置文件)
我们可以看见我们熟悉的东西，'main' : 'index.js'，这是默认的打包入口，这就是为啥我们一开始一定要在 src 目录下新建 index.js 文件，不能改名字。
～2. 如果使用 npm init 就会让在控制台输入自定义的 "name"、"version"等
我们更推荐 npm init -y 这个命令
如图是使用 npm init 控制台显示，此时输入一个 yes 就可以得到一样的 package.json 文件，就是让你输入一些配置实际我们并不需要，只需要输入回车键，最后一步输 yes 就ok了。
～3. 使用一下这个文件：
修改 script（脚本） 配置项，为 "runpack": "webpack"，就可以在终端输入 npm run runpack，让我们的 npm 大佬帮我们运行 webpack 啦。
注意：里面包含着我们所有依赖包和对应的的版本，执行 npm install 会按照这个文件里的版本信息来下载，下载的依赖包都会放在根目录下的 node_modules 文件夹里。
2.2 package-lock.json (node)
lock: 中文是锁的意思，就是锁定依赖包的版本防止后来因为不同的程序员使用不同的版本导致的错误和误会，所以我们需要把它们锁起来，通俗一点就是固定我们依赖包的版本，防止后期因为版本不一样导致的错误。
2.3 webpack.config.js (webpack) !
webpack.config.js （也可以是 webpack.config.json）文件，webpack 的所有配置都写在里面。
先了解一下 webpack.config.js 文件的书写规则，整个文件内部使用 module.exports = { 里面书写键值对 } 导出，如下：
3. 入口出口（entry、output）
3.1 入口 （entry）
entry 配置项是用来指定 webpack 打包入口 js 文件的配置，可指定一个路径。此项默认配置为 ' ./src/index.js '，这也是一开始我们新建文件 index.js 并且不能改名的原因。
3.2 出口 （output）
此项指定一个对象，第一个属性 path 也是指定一个路径，默认是指定根目录下的 dist 文件夹，只
我们如果要指定需要导入一个路径（ path ）模块，如下：
filename 指定一个文件名，这是 index.js 被打包后的文件名，导入这个文件就可以看见效果。
const path = require('path');
注意：此时我们的 index.html 还是在原来的文件夹里，我们先使用这个原来的文件导入 bundle.js 看效果，后面学了 plugin 插件之后再回头解决这个问题。
4. loader
4.1 先了解 webpack 打包规则
没有被依赖的文件（模块）是不会被打包的，比如你随便在 js 文件夹下面新建一个 element.js，这个文件是不会被 webpack 打包的，因为它没有被依赖，不需要自然不是不会打包啦，当然其他的一些静态资源（如图片、视频）会有自己的打包部署方法，后面会讲到。
注意：每次依赖的文件有修改我们都是需要重新打包的，以后使用插件（plugin）解决这个问题，先卖个关子。
webpack 作为一个中间人，把一堆文件打包成浏览器可以识别的资源，可以看出 webpack 的强大和重要性。
演练：
我们在 js 文件夹下新建一个 element.js ，在页面上创建一个元素。 一定记得去 index.js 里导入 element.js 。
import './js/element.js'
设置样式：
写一点 css代码 在 css/element.css 文件里，如下：
然后再去 index.js 或者 element.js 导入它，但是会报错
这里提到了一个叫 loader 的东西，那 loader 是什么呢？
4.2 css-loader、style-loader、less-loader
我们先了解什么是 loader ，
最低0.47元/天 解锁文章
扫一扫
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
