webpack可以做什么事情？

1、能够处理js文件的相互依赖关系；

2、能够处理js的兼容问题，把高级的浏览器不识别的语法转为低级的浏览器能正常识别的语法

命令： webpack 要打包的文件路径 打包好的输出文件的路径

当我们在控制台直接输入webpack命令执行的时候，webpack做了一下几步：

1、我们并没有通过命令的方式去指定入口和出口

2、去项目的根目录中查找一个叫做webpack.config.js的配置文件

3、找到后会解析执行这个配置文件，解析完成后就得到了文件配置中

导出的配置对象

4、当拿到配置对象后，就拿到了配置文件中指定的入口和出口，然后进行

打包构建

安装webpack-dev-server 来实现自动打包编译的功能

1 、npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

2、安装完毕后，用法和webpac命令完全一样

3，由于是在项目中本地安装的webpack-dev-server,所以无法把它当做脚本命令

在powershell中执行，只有那些安装到全局 -g 的工具才能在终端中运行

4.如果星耀正常运行要求在本地项目中安装webpack

5.帮我们打包生成的bundle.js文件并没有存放到实际的物理磁盘上，而是直接

托管到了电脑的内存中，我们在项目根目录中找不到这个文件

6。把打包好的文件以虚拟的形式托管到了项目的根目录中，

页面引入根路径下面的bundle.js

package.json文件中添加 dev:"webpack-dev-server --open --port 3000 --contentBase src --hot "
npm run dev

html-webpack-plugin插件：

1.自动在内存中根据指定页面生成一个内存的页面

2.自动把打包好的bundle.js文件插入到页面中

const htmlwebpackplugin=require('html-webpack-plugin');
plugins：[
new htmlwebpackplugin({
template:path.join(__dirname,'./src/index.html');
filename:'index.html'
})
]

style-loader css-loader

安装：npm i style-loader css-loader -D

webpack.config.js 中添加

module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}

cnpm i less-loader -D

cnpm i less -D

cnmp i sass-loader -D

cnpm i node-sass -D

webpack 处理第三方文件类型的过程：

1.发现这个要处理的文件不是js文件，然后就去配置文件中查找有没有对应

的第三方loader规则

2。如果能找到对应的规则，就会调用对应的loader处理这种文件类型

3。当找到配置文件后，webpack就会去解析执行这个配置文件，

当解析执行完成配置文件后，就得到了配置文件中导出的配置对象

4，当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，

然后进行打包构建

cnpm i url-loader file-loader -D

{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}

Babel可以帮我们将高级语法转换为低级的语法

1.在webpack 中，可以运行两套命令，安装两套包去安装Babel相关的loader功能

1.1.第一套包：

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

1.2第二套包：

cnpm i babel-preset-env babel-preset-stage-0 -D

2。打开webpack的配置文件，在module节点下的rules数组中添加一个新的

匹配规则：

2.1 {test:/ \.js$/,use:'babel-loader',exclude:/node_modules/}

2.2在配置babel 的loader规则的时候，必须把node_modules目录，通过

exclude选项排除掉，

3.在项目根目录中，新建一个 .babelrc 的babel配置文件， 这个配置文件属于

json格式，不能写注释，字符串必须用双引号

3.1

{
presets:["env","stage-0"],
plugins:["transform-runtime"]
}

本文由暗月淡梅花原创，欢迎关注，带你一起涨知识！