徒手搭建webpack/配置webpack步骤/从0到1配置webpack/vuecli配置

这里说明一下，我们先从webpack4说起，因为webpack5和4不太一样，看五直接跳第三点，看vue从0到1跳第六点

以下内容全部以图片形式展示（自己动手尝试一下印象岂不是更深？）

当然啦，也有完整的，自己拉代码https://github.com/ispaomoya/Unarmed-webpack.git

文章有点长，你忍一下

目录

这里说明一下，我们先从webpack4说起，因为webpack5和4不太一样，看五直接跳第三点，看vue从0到1跳第六点

一、安装一下环境

1.1下载node,并查看版本（可能会出现版本兼容性问题）

​1.2创建文件目录

 1.3初始化npminit，安装webpack，webpack-cli

1.4打包webpack

二、单独配置webpack，这里是webpack4角度

2.1在webpack.config.js这样写

2.2.加载css-loader和style-loader

2.3.加载less-loader

2.4加载postcss-loader

2.5加载file-loader

 2.6加载url-loader

三、webpack5角度

四、webpack另一个核心是Plugin

4.1clean-webpack-plugin

4.2html-webpack-plugin

4.3DefinePlugin

4.4copy-webpack-plugin

五、es6转es5

5.1Babel的预设preset

5.2加载babel-loader

5.3配置babel.config.js

 六、配置vue

6.1vue文件处理

 6.2加载vue-loader

6.3开启本地服务

 6.4模块热替换HMR

七、webpack其他

1.webpack打包dist进行分包问题

---

一、安装一下环境

webpack的中文官方文档是 https://webpack.docschina.org/

Node官方网站： https://nodejs.org/

1.1下载node,并查看版本（可能会出现版本兼容性问题）

1.2创建文件目录

 1.3初始化npminit，安装webpack，webpack-cli

三条命令都是一样的，选一条执行就行，这里建议局部安装

npm install webpack wepack-cli -D//install可以简写成 i

npm i webpack wepack-cli -D//这句话意思是同时安装webpack和webpack-cli，-d代表局部安装

npm i webpack wepack-cli -g//这句话意思是同时安装webpack和webpack-cli，-g代表全局安装

1.4打包webpack

（1）使用npx webpack命令打包

（2）但是我们一般不会这样去执行，现在来配置webpack

打开package.json文件如下图

配置打包命令

删除根目录下的dist文件夹，然后执行下图，这样就可以自定义打包了，项目里可能会扩展一下打包命令，如："build:pc": "webpack"，执行的时候就是npm run build:pc

二、单独配置webpack，这里是webpack4角度

我们在根目录下创建webpack.config.js为文件名的文件，默认就别改这个文件名了

如果你想改的话，例如你改成abc.config.js,那么你的package.json中的要这样

"scripts": {

        "build": "webpack --config abc.config.js"

}

这样的话会比较麻烦

ok回归正题

2.1在webpack.config.js这样写

2.2.加载css-loader和style-loader

项目肯定不止js文件，那么还有css文件，但是webpack不知道怎么去加载

为了理解更深刻，我分文件夹来实现

①创建css.js文件，写js原生，在src下创建css文件夹，创建style.css文件

 ②安装他们

③在webpack.config.js中配置他们，然后打包

 这里穿插一个vscode插件

这样css就加载成功了，效果图

2.3.加载less-loader

如果要处理less文件？可以这样，先安装一下，npm i less -D    ---------安装

然后执行npx lessc ./src/css/style.less ./src/css/abc.css           ----------这句跟webpack没有关系，这句话相当于在node_module/bin/lessc中执行，意思是，把style.less转换成abc.css

以上内容是小知识点，ok看下图

这里才是2.3的正题

 安装less-loader

在webpack.config.js中配置他

然后你打包跑一下，效果图

2.4加载postcss-loader

 先认识一下PostCSS工具，可以用来对css一些东西转换和适配，比如给浏览器添加前缀

我们先来安装一下，postcss和postcss-cli

要加前缀的话，还要安装这个npm install autoprefixer -D

然后执行下面这句话，意思是：--use指定postcss里面的一个插件是autoprefixer，-o是指定输出的文件，然后再跟一个输入的文件

npx postcss --use autoprefixer -o ./src/css/a.css ./src/css/autoprefixer.css

 ok回归正题

安装postcss-loader，配置webpack.config.js信息，然后再打包跑一下（如果前面这些做了，删a.css，记得在idnex.js中引入autoprefixer.css）

 

 事实上我们并不需要配置autoprefixer，

可以用postcss另一个插件，postcss-preset-env，

可以安装一下，npm install postcss-preset-env -D，这个插件包含了autoprefixer

然后把插件这里修改成这样，这里我就不校验了

2.5加载file-loader

我们现在能加载js，css,less等这写文件，那如果是我要加载静态资源呢？png，jpeg等等这些

这就要用到file-loader，安装npm i file-loader -D

搭建目录

 打包一下，我们看一下打包后的样子（这里强调一下打包前要手动删除dist，后面会讲自动）

这里我有点小问题，图片，以后再更吧

 2.6加载url-loader

 跟上面差不多，不码了，自己看官方文档

三、webpack5角度

我们当前使用的webpack版本是webpack5：

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；

在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

asset/resource 发送一个单独的文件并导出 URL。file-loader

asset/inline 导出一个资源的 data URI。url-loader

asset/source 导出资源的源代码。raw-loader

asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体

四、webpack另一个核心是Plugin

4.1clean-webpack-plugin

在之前打包，我们都是手动删除，这里讲自动删除包

先安装一下，npm install clean-webpack-plugin -D

然后在webpack.config.js导入

最后再调用一下

（打包过程是先删除原有的dist，然后在生成一个新的dist） 

4.2html-webpack-plugin

这个插件就是在打包的时候给你生成一个index.html的入口文件，细心的你发现，我们前面打包后以main.js为主，安装一下：npm install html-webpack-plugin -D

过程跟上面一样（4.1节）

（你可以先删除根目录下的index.html，(删除前建议cv一下文件内容，下一步你就知道为什么了)然后再打包，webpack会根据源码中的default_index.js自动在你dist中生成index.html，这个时候你打开dist/index.html,在当前页面进行live serve查看，live serve是什么？请看2.3.加载less-loader标题的上面第二张图）

如果你想自定义html模板可以这样

1.在根目录下新建public文件夹，再建index.html，然后把根目录下的index.html内容cv到public/index.html

2.在public/index.html尝试改点东西

3重点来咯，像下图那样配置

效果图（打包后，需要点击dist/index.html，然后右键，然后点击live serve）

这里补充一下目录结构，当然还要字体，css没有引入，这里写不码了

dist

---css

        ---style.css

---font

        ---font.woff

---img

        ---one.png

---js

        ---main.js

index.html

4.3DefinePlugin

这个插件的用处是，解决项目定义常量问题，例如你的pulic/index.html中有常量引用路径，需要配置一下，如下图（这个是webpack内置的插件，不需要安装了）

4.4copy-webpack-plugin

这个是把一些东西直接复制到dist文件夹汇中

首先安装一下，npm install copy-webpack-plugin -D

然后配置（这个我就不跑了，我注释了，你们自己跑吧）

这里补充一个细节，看见上图module.exports下面的第一第二行吗，假设你报错了在console中看到是main.js打包后的的定位，代码量大的话，就不能快速定位报错位置了，就把这两行打开

五、es6转es5

我们用babel工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的 JavaScript

babel/core：babel的核心代码，必须安装；

babel/cli：可以让我们在命令行使用babel；

首先安装一下， npm install @babel/cli @babel/core -D

再安装一下箭头函数转换插件， npm install @babel/plugin-transform-arrow-functions -D

再安装一下const转var插件，npm install @babel/plugin-transform-block-scoping -D

 然后在根目录下新建abc.js

然后在执行以下（注意你们复制命令时，仔细看你在终端的命令）

执行哪个文件，--out-dir输出到那个文件夹，或者--out-file输出文件，后面跟上插件

 npx babel abc.js --out-dir dist  --plugins=@babel/plugin-transform-block-scoping ,@babel/plugin-transform-arrow-functions

 

 

5.1Babel的预设preset

安装一下，npm install @babel/preset-env -D

执行一下，npx babel src --out-dir dist --presets=@babel/preset-env

5.2加载babel-loader

上面已经安装过@babel/core ，转箭头函数，转const插件了，那么这里只需要安装babel-loader

首先安装一下，npm install babel-loader 

然后配置，然后打包验证

babel预设

安装一下，npm install @babel/preset-env

5.3配置babel.config.js

早期babelrc.json/js/cjs/mjs来编写

从babel7开始，都是用babel.config.js/json/cjs/mjs

现在我们来配置一下

首先在根目录下新建babel.config.js文件

 

 六、配置vue

安装一下vue，npm i vue@next（安装vue3版本）

安装一下，npm i @vue/cli

(如果直接npm i vue，默认安装vue2版本，听说要把默认改为vue3，但是现在还没改，今日是22年1月)

然后指定版本号

vue(.runtime).global(.prod).js：

通过浏览器中的 <script src=“...”> 直接使用；

我们之前通过CDN引入和下载的Vue版本就是这个版本；

会暴露一个全局的Vue来使用；

vue(.runtime).esm-browser(.prod).js：

用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type="module"> 来使用)。 vue(.runtime).esm-bundler.js：

用于 webpack，rollup 和 parcel 等构建工具；

构建工具中默认是vue.runtime.esm-bundler.js；

如果我们需要解析模板template，那么需要手动指定vue.esm-bundler.js；

vue.cjs(.prod).js：

  服务器端渲染使用；

p 通过require()在Node.js中使用

 然后打包验证一下

6.1vue文件处理

需要sfc支持，single-file components (单文件组件)

插件一：Vetur，从Vue2开发就一直在使用的VSCode支持Vue的插件；

插件二：Volar，官方推荐的插件（后续会基于Volar开发官方的VSCode插件

自己安装吧

然后在根目录下的src下，新建vue文件夹，在建app.vue文件

 6.2加载vue-loader

①安装一下，npm install vue-loader -D

②安装一下， npm install @vue/compiler-sfc -D

 然后自己打包验证一下，反正我是出了点小问题这里（下面的两行看一下就好）

现在是这个，npm install @vue/compiler-sfc -D

vue2是这个vue-template-compiler

6.3开启本地服务

 我们之前都是修改完后，打包，然后在dist/index.html右键live serve打开网页的

这里有个细节（live serve这个插件是自动帮我们刷新+监听）

（这里还有一种监听build的方法如下图，了解一下就好了

只要修改了代码，就会自动打包

）

现在我们在本地跑项目

首先安装一下，npm install webpack-dev-server -D 

 6.4模块热替换HMR

 再说吧

七、webpack其他

1.webpack打包dist进行分包问题

一个项目如果所有组件都打包到app文件里面，那么首次加载就要把所有东西都下载下来，造成第一次进入很卡，很慢。

有些组件并不是在首次加载时用到的，我们可以对这些文件进行分包，这样的话就可以对首次加载优化。

我们可以把import写成函数，webpack对import()解析时会把这个文件单独打包会以chunk+哈希命名，import()导入的文件，用then()返回