摘要：能自动寻找到浏览器不能识别的语言，进行兼容处理。会从配置的开始递归找出所有依赖的模块。代码块，一个由多个模块组合而成，用于代码合并与分割。输出结果，在经过一系列处理并得出最终想要的代码后输出结果。
网页中常见的静态资源：
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中引入，会生效，则打包成功，在这里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
因此可以将物理页面的注释掉，也不会影响页面效果，也就是使用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文件的配置
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53113.html
摘要：多页面配置进击基础篇一进击基础篇二配置多页面配置多页面配置即是多入口需要写成对象形式，注意数组形式会变成多入口单页面，因为打包之后的会合并成一个入口文件出口不能写同一个文件用代替以上配置并不能多页面，还需要个模板，并且指明各自的代码块去生成 多页面配置 进击webpack 4 （基础篇一） 进击webpack4 （基础篇二：配置） ## 多页面配置 ## 多页面配置即是多入口 entr...
摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...
摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言 本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...
摘要：基础目录结构以及各个文件的作用初始项目一路回车，一律使用默认的项目配置修改如下超级详细的手写配置来启动项目附配置作用说明用来启动命令这里将开发环境的配置传入到启动的中。 基础目录结构以及各个文件的作用 showImg(https://segmentfault.com/img/remote/1460000018271585?w=538&h=284); 初始npm项目 npm init 一...
摘要：基础目录结构以及各个文件的作用初始项目一路回车，一律使用默认的项目配置修改如下超级详细的手写配置来启动项目附配置作用说明用来启动命令这里将开发环境的配置传入到启动的中。 基础目录结构以及各个文件的作用 showImg(https://segmentfault.com/img/remote/1460000018271585?w=538&h=284); 初始npm项目 npm init 一...
阅读 3139·2021-11-22 14:45
阅读 3269·2019-08-29 13:11
阅读 2280·2019-08-29 12:31
阅读 895·2019-08-29 11:21
阅读 2974·2019-08-29 11:09
阅读 3599·2019-08-28 18:11
阅读 1385·2019-08-26 13:58
阅读 1258·2019-08-26 13:27
