webpack4基础配置

网页中常见的静态资源：

js: .js .jsx .coffee .ts（TypeScript 类 C# 语言）

css： .css .less .sass .scss

Images: .jpg .png .gif .bmp .svg

Fonts: .svg .ttf .eot .woff .woff2

Template: .ejs .jade .vue

网页中引入较多的静态资源会使网页的加载速度变慢(要发起很多的二次请求)，并且还要处理复杂的依赖关系

webpack概念：

是一个前端自动化构建工具，基于node.js 开发的前端工具，可以完美的实现资源的合并，打包，压缩等功能。能自动寻找到浏览器不能识别的语言，进行兼容处理。默认只能打包js

webpack核心概念

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。

Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

Loader：模块转换器，用于把模块原内容按照需求转换成新内容。

Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。

Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

mode: 模式，选择development 或者production

配置webpack环境：

1、全局安装 npm install webpack webpack-cli webpack-dev-server -g

2、 创建项目文件夹，例如文件夹名称为vue，在文件夹中创建两个文件夹，分别文dist和src

3、输入命令npm init -y ，初始化文件包，会生成一个package.json 文件，注意不要随意修改此文件，后续步骤再进行配置

4、安装相应的所需模块，例如npm i jquery -S 安装 jQuery

5、在文件包的根目录下面创建文件webpack.config.js文件，在src中创建main.js 、index.html文件，分别写入相应的调试代码。

6、配置webpack.config.js文件

7、修改package.json的配置

--open 设定自动打开项目

--port 3000 指定端口为3000

--contentBase src 指定启动的根目录，会自动打开根目录中的index.html文件，启用过程比较繁琐，建议用html-webpack-plugin 插件配置启动页面

--hot 启用浏览器热更新

8、运行 npm run dev ，会自动打开index.html，在dist目录下并不会看到bundle.js ,但是在index.html中引入<script src="/bundle.js"></script>，会生效，则打包成功，在这里bundle.js直接托管到电脑的内存中，虽然看不到，但是确实存在，它和dist平级

* 

html-webpack-plugin插件配置：

1、运行 npm i html-webpack-plugin --save-dev 安装到开发依赖

2、在webpack.config.js文件中需要先引入模块，然后再进行配置，注意，前面我们安装的webpack为全局的，这里就会报错

因为本地找不到webpack，所以可以再执行npm install webpack安装本地包，在webpack.config.js加入下面代码

可以更改filename的值，查看物理磁盘的页面和内存里的页面的区别，可以发下内存磁盘的html文件body的底部生成了一个script标签，引入了bundle.js

因此可以将物理页面的<script src="/bundle.js"></script>注释掉，也不会影响页面效果，也就是使用html-webpack-plugin插件之后，不需要手动处理bundle.js的引入，插件会自动帮我们创建script标签，引入正确的bundle.js

使用webpack打包css:

webpack只能打包js文件，要打包其他文件需要安装其他模块

1、运行 npm i style-loader css-loader --save-dev

2、修改webpack.config.js文件的配置

使用webpack打包less: (sass的打包和less的类似 npm i sass-loader node-sass --save-dev)

1、运行 npm i less-loader less -D

2、修改webpack.config.js文件的配置

使用webpack打包url地址文件:

1、运行 npm i url-loader file-loader --save-dev

2、修改webpack.config.js文件的配置 {test:/.jpg|png|gif|jpeg$/, use: 'url-loader' } //处理图片路径的规则

webpack.config.js文件的配置