【搭建webpack及webpack的优化】

搭建webpack

1.首先创建一个文件夹 mypack

2.项目初始化 npm init -y （-y的意思是所有选项都选yes）

3.安装webpack和webpack的脚手架 npm i webpack
webpack-cli -D

4.把创建的mypack导入编译器

5.在mypack里边新建一个目录命名为src，然后src里新建一个index.js文件和一个header.js文件。

6.在header.js中写几行代码

7.在index.js中也写点内容

8.执行webpack的第一个命令

9.执行完命令后看看目录里是否出现了一个dist文件夹，dist文件夹里边有一个main.js文件（如果出现了，就证明前边几步没问题，否则重来）

10.在dist文件夹里新建一个index.html文件，把main.js引入到index.html中。（注意：script标签必须写入到body中）

然后点击运行，打开浏览器看看是否出现了“你好webpack”

##编写配置文件
1.在根目录下创建 webpack.config.js 文件

2.在package.json文件中写入
"build":“webpack”,
"serve":“webpack”,
在dos窗口中输入 npm run serve 或 npm run build 命令都可以打包。

3.但是我们希望的是 npm run serve 不仅可以打包，还可以启动服务器。所以，这就要用到 webpack-dev-serve。
首先安装

4.安装成功后，配置服务器，在webpack.config.js中配置，
（图片中矩形内的内容）

5.打开package.json文件，在 serve 中加入 serve

6.在根目录下新建一个public文件夹，然后在public中新建一个index.html文件

7.安装html-webpack-plugin 插件

安装完毕后导入该插件（在webpack.config.js中导入）

然后再实例化（webpack.config.js）

8.然后在dos窗口输入npm run serve，运行到浏览器

是一个热更新的项目

在header.js中修改内容，浏览器也会跟着刷新
这样就实现了npm run serve 不仅可以打包，还可以启动服务器。

webpack的优化

webpack处理css

1.在src文件夹下创建assets文件夹，然后再assets中在创建base.css文件，在该文件随便写个样式，然后导入到index.js里

2.安装 style-loader 和 css-loader

3.使用插件（css-loader是用来处理css文件的，style-loader是把css加载到style标签）

4.打包文件（npm run build），但是里边没有发现css

运行index.html文件，发现内容样式改变了

5.安装插件，这个插件可以把css单独抽出一个单独的文件

导入插件到webpack.config.js中

把style-loader注释掉，然后引入 mini-css-extract-plugin插件

然后在plugins中实例化

接着在dos窗口中打包（npm run build）
发现dist目录里边多了一个style.css文件（就成功了）

webpack处理less

1.安装less-loader（处理less文件）

2.在assets目录下新建一个自定义文件my.less

3.把my.less导入到index.js文件里

4.配置less文件

注意：loader是有顺序的，从右到左，先用less-loader去加载less，再用css-loader去加载css，因为less处理完就变成css了

5.最后在dos窗口输入 npm run serve命令，并在浏览器出现以下内容

且style.css中拥有my.less中的内容时就成功了

webpack处理文件和图片

1.处理文件和图片时用到file-loader和 url-loader
url-loader：当文件比较小时转成base64（减少一次http请求）且url-loader实在file-loader的基础上写的

2.安装file-loader和 url-loader

3.在assets目录下新建一个images文件夹，并在images文件夹下放一张图片

4.在index.js中，导入图片、创建图片、指定src、插入到页面

5.在webpack.config.js中配置

6.在dos窗口中运行 npm run build

这样就把小的图片打包成base64格式，就减少了一次http请求

js与css压缩插件

1.安装插件


2.在webpack.config.js中导入css压缩插件和js

3.实例化

4.在base.css中添加样式（写一些冗杂的样式）

5.npm run build打包，打包后会发现style.css中会出现这些样式，main.js中的代码也会压缩，所以插件会优化代码

sourceMap

sourceMap能够让源代码和压缩过的代码有一个一 一映射的关系，这个关系能够告诉我们出错了且能够查到源代码是哪一行

1.打包 npm run build，打包完后，可以看见dist文件夹里多了2个**.map**文件，是两个映射关系

然后打开浏览器，打开控制台，如果你出错了，就可以发现错误，里面提示是哪一行哪一列错了（上线的项目，建议不要sourceMap，开发中可以要）

设置目录别名

1.在webpack.config.js中导入 path

2.在index.js中 把header中的 .换成 @，说的通俗点@就是一个别名

3.执行 npm run build 命令，然后在dist下的index.html点击启动浏览器，会发现能打开这个文件

静态资源目录

1.安装拷贝插件

2.导入拷贝插件（webpack.config.js）

3.实例化

4.在src目录下新建一个static文件夹，然后放进去一张图片（static代表静态资源目录）
5.打开index.js文件夹

6.在执行 npm run serve 命令，会发现出现一张新图片（成功）

按需导入

比如按需导入jquery
1.安装

2.在index.js中写一个jquery

3.通过npm run serve 打包，可以看到默认没有打开jquery

点击图片后，图片缩小，会打开jquery

prefetch

prefetch有两种方式
第一种是放到 link 里边
你如果想提前预加载某一个js，可以手动的把prefetch放入到link中的rel里，如：

preload 和 prefetch 一样，只不过 preload 是提前预加载css的

哈希

哈希命令：
hash
chunkhash：如果入口发生变化就会发生变化
contenthash：如果内容发生变化，名称就会变化
1.打开webpack.config.js文件，在 出口（output）中的文件名（filename）中加入 hash

在plugins中也写入

2.删除dist文件，然后在dos窗口打包（npm run serve），就会发现dist文件又回来了，且里边的文件名变了

再打包一次，文件名就不会再变了。
如果把base.css中的内容改了，那么文件名字就会发生变化

3.若是换成contentHash


再执行以上操作

webpack清理插件

1.安装插件

2.在webpack.config.js中导入插件

3.实例化

4.修改base.css中的样式，并打包

该插件的作用就是打包前清空dist目录