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环境：

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

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

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

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

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

六、配置webpack.config.js文件

七、修改package.json的配置

--open 设定自动打开项目

--port 3000 指定端口为3000

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

--hot 启用浏览器热更新

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

*

html-webpack-plugin插件配置：

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

二、在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文件，要打包其余文件须要安装其余模块

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

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

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

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

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

使用webpack打包url地址文件:

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

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

webpack.config.js文件的配置