Weback使用详情

webpack五个核心概念

入口(entry)：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

出口(output)：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

loader:loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

插件(plugins):loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务

模式:通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

使用流程

1.初始化项目

初始化项目，生成package.json文件

npm init

使用 npm init 初始化一个项目，并安装webpack

2.安装 webpack 需要的包

 npm install --save-dev webpack-cli  webpacknpm i webpack webpack-cli -g // 全局安装或npm i webpack webpack-cli -D //写入到package.json的开发依赖中

3.创建配置文件

webpack.config.js（不能改）

"webpack": "webpack --config webpack.config.js"

单入口

多入口

4.编译并测试

npm run webpack

打包样式资源（loader）

webpack无法处理样式资源，如果要处理，需要引入loader，写loader我们需要先写一下webpack的配置文件，配置一下webpack 作用就是指挥webpack怎么干活，干哪些活。

以打包css文件为例

我们这里用到了css-loader和style-loader两个包,所以需要下载这两个包

 npm i css‐loader style‐loader ‐D

在根目录下创建webpack.config.js

//resolve用来拼接绝对路径的方法
const {resolve} =require("path")
module.exports={//入口，指示webpack从哪个文件打包entry:"./src/index.js",output:{//打包好之后的文件名filename:"bundle.js",//__dirname是node的一个变量，代表当前文件的目录的绝对路径path:resolve(__dirname,"dist")},//loader的配置module:{rules:[{//匹配哪些文件test:/\.css$/,//使用哪些loader进行处理use:[//创建一个标签，将js中的css样式资源插入进去，添加到页面中的head中生效'style‐loader',//将css文件以字符串的形式变成common.js的模块加载到js中，内容是样式字符串'css‐loader'//use数组中loader执行顺序，从右到左，从下到上，依次执行]}]},

插件(plugins)

先安装插件

npm i html‐webpack‐plugin ‐D

引入webpack插件

功能:默认会创建一个新的html文件，自动引入打包输出的所有资源(js/css)

webpack.config.js

const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={entry:,output:{},module:{},//plugins的配置plugins:[new HtmlWebpackPlugin({template'./src/index.html'})],
}

运行打包 npx webpack

会发现多了一个html文件(默认打包只有一个js文件)

打包图片

下载两个loader

npm i url‐loader file‐loader ‐D
npm i html-loader -D

webpack.config.js

module:{rules:[{test:/\.（jpg|png|gif)$/,//当只有一个loader的时候不需要use，可以直接写loaderloader:"url-loader",options:{//当发现图片小于8kb，就会被base64处理limit:8*1024，//关闭url-loader的es6模块化，使用commonjs解析，解决html-loader（使用的是common.js）解析问题esModule:false,//[hash:10]取图片的hash前十位//[ext]取文件原来扩展名name:"[hash:10].[ext]"}}，{test:/\.html$/,//处理html文件的img图片（img打包之后文件名变了），负责引入img，从而能被url-loader处理loader:"html-loader",}]},

图片处理成base64

优点：减少请求数量（减轻服务器压力）

缺点：图片体积会更大（文件请求速度变慢）

DevServer（自动编译）

目前我们的每次修改都需要重新打包，不然总是显示之前的效果。此时我们需要创建一个服务器帮助我们解决这个问题

安装

npm i webpack‐dev‐server ‐D

webpack.config.js编写配置

plugins:[
],
//启动：webpack-dev-server
devServer:{//告诉服务器内容的来源。仅在需要提供静态文件时才进行配置contentBase:resolve(__dirname,"dist"),//启动gzip压缩compress:true,//端口号port:3000
}

开发服务器devServer，用来自动编译自动打开浏览器和刷新浏览器

特点：只会在内存中编译打包，不会有任何输出

打包优化

按文件格式分类好各个文件夹

css输出优化

css需要先提取文件

首先下载插件

npm i mini‐css‐extract‐plugin ‐D

修改配置webpack.config.js

const MiniCssExtractPlugin=require("mini‐css‐extract‐plugin");module:{rules:[{test:/\.css$/,use:[//提取js中的css成单独文件MiniCssExtractPlugin.loader,'css‐loader']}]},
plugins:[new MiniCssExtractPlugin({//对输出的CSS文件放到指定目录并重命名filename:"css/build.css"})
],

js输出优化

直接在filename后面加上文件夹的名字重新打包即可

	entry:"./src/index.js",output:{publicPath:"/",filename:"js/bundle.js",path:resolve(__dirname,"dist")},

img输出优化

			{test:/\.（jpg|png|gif)$/,loader:"url-loader",options:{limit:8*1024，esModule:false,name:"[hash:10].[ext]",//输出优化outputPath:'img'}}，

性能优化

开发环境优化

优化打包构建速度

如果我这个项目有一百个js

文件，当我修改了其中一个文件之后，其他99个文件并没有修改但也是重新执行了，这种效率肯定很浪费

引入一个新的东西来解决这个问题叫HMR

HMR:hot module replacement 热模块替换

作用：一个模块发生变化，只会重新打包这一个模块而不是所有模块

极大提升构建速度

使用方法，只需要在服务器配置加入hot：true就可以，注意需要重启服务

优化代码调试

source-map:一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射关系可以追踪到源代码错误），只需做下面配置即可

生产环境优化

优化打包构建速度

优化代码运行的行能