先简单感受一下操作步骤
-
在文件夹上初始项目 :
yarn init -y。 -
安装依赖：
webpackwebpack-cli【安装的开发依赖,-D是为了区分开发种是否要用webpack】，命令：yarn add -D webpack webpack-cli，此时出现了文件package.json。 -
打包：
-
yarn webpack或npx webpack（可以执行的前提是已经装上了cli）打包后目录里出现了dist文件夹； -
在package.json中直接加上
script，后在终端直接输出yarn build也可以打包。
-
关于webpack的一些概念
entry 入口起点--用来指定打包时的主文件
-
默认值是 ./src/index.js，但你可以通过在webpack.config.js中配置
entry属性，来指定一个（或多个）不同的入口起点。 -
entry可以传一个单文件，把地址写成这个，那打包出来的主文件就是这个【一般不改】。
-
entry可以传一个数组：如果打包两个文件，就用逗号分开。
-
entry 可以放对象：这样打包的话就是两个文件，属性名 .js。
output 输出--用来指定打包的目录
-
output属性告诉 webpack 在哪里输出它所打包的文件，以及如何命名这些文件。
-
在webpack.config.js中写上：
-
clean自动清理的是path中的文件。 -
path指定打包目录，需要绝对路径，所以需要引入路径，path这里也需要配置一下。 -
如果entry用的对象写法，那
output的filename就写成[]的，这样就能包含多个了，最后打包也能打包成多个文件【中括号内的代表变量】。 -
也可以给加id值 哈希值；一般不用。
loader
-
webpack 只能理解 JavaScript 和 JSON 文件，loader 让webpack能够去处理其他类型的文件。
-
loader 有两个属性：
test属性，识别出哪些文件会被转换。use属性，定义出在进行转换时，应该使用哪个loader。（单一职责，引入什么文件就要引入对应的loader）。 -
以css文件为例：
-
安装：
yarn add css-loader -D和style-loader； -
配置：js中用
import引入css文件并在webpack.config.jsrules中test和use。 -
test后面可以配置多个格式，用|隔开。
-
babel --转译JavaScript文件
- 若想在webpack中支持babel，则需要向webpack中引入babel的loader。
- 使用步骤：
-
安装
npm install -D babel-loader @babel/core @babel/preset-env webpack； -
配置：
-
另一种配置 （看需要兼容的浏览器）：
-`exclude`选项：可以填写选择排除转译的文件。
-
plugin
-
扩展webpack功能。
-
使用步骤（以
html-webpack-plugin为例）：-
安装
yarn add -D html-webpack-plugin； -
在webpack.config.js中引入；
-
配置。
-
source Map
-
把源码和编译后的代码做成映射，可在打包后对源码进行调试，可以更快找到
error和warning。 -
首先，把
mode设置为'development'。 -
配置
devtool: 'inline-source-map'。
开发服务器
-
可以简化每次编译时的命令代码，也可以自动编译，解放双手。
-
一般来讲会有这几个办法编译代码：
-
终端 直接执行
yarn webpack --watch； -
设置为packge.json的命令,然后终端执行命令
yarn watch。
-
-
webpack-dev-server可以让浏览器自动加载页面：-
安装
yarn add -D webpack-dev-server； -
终端执行
yarn webpack serve，最后显示的网页就如图了； -
自动打开网页
yarn webpack serve --open； -
或者：在package.json中配置，终端执行
dev也可以自动启动网页。
-
