webpack学习

Posted 2020-11-03 落落月

1·生成package.json，用于存放所有依赖名称版本等信息:

命令行：npm init

 

2.在对应项目中安装webpack

命令行：npm i webpack -D

然后尝试执行webpack打包功能

命令行：npx webpack --mode development   （npx是node v5.2.0内置的包执行器，简化了包的命令执行过程）

上述命令会提示：

webpaclk-cli被webpack分离出去了，webpack-cli的作用是封装了所有与cli处理相关的的代码，并捕获所有选项操作传递给webpack

然后输入yes直接安装webpack-cli

 

再次输入命令：npx webpack --mode development

还是报错：

提示入口模块未找到，这是因为webpack打包的默认入口文件夹是./src，因此需要在项目目录下创建src文件夹，当然，仅仅是创建文件夹是不行的，还要有被打包的文件。

输入命令：mkdir src

在src文件夹下创建index.js文件

 

再再次输入命令：npx webpack --mode development 

依旧可能会报错，具体忘了什么错误，就是提示无法找到webpack模块，这个时候需要在全局安装webpack模块或者全局安装webpack-cli

命令：npm i webpack -g

 

再再再次输入：npx webpack --mode development 

这次就能执行成功了，而且如果本地不存在dist文件夹，会自动生成dist文件夹并且生成打包好的main文件，因为webpack的默认输入就是dist/main.js

 

3.监听文件更改：

命令行：npx webpack --mode development --watch

花了62ms打包了文件，这时候我们尝试更改src中的index文件，然后保存。

这是保存后生成的命令提示，表示监听打包用了40ms，包括各种更改信息等。

 

4.开发过程需浏览器自动刷新功能来减少开发不必要开销，介绍一下：

webpack-dev-server，一个基于express.js的开发服务器，提供实时的浏览器刷新功能，当然也包括了上述的监听文件功能。

命令行：npm i webpack-dev-server -D

 

安装成功之后执行启动webpack-dev-server

命令行：npx webpack-dev-server --mode development --content-base ./dist

contentBase解释：webpack-dev-server监听的入口文件index.html默认为根目录下的index.html，但如果项目文件过大，不可能把index.html放在根目录，因此需要content-base指定监听的bundle.js

如果不写content-base，也能编译成功，不会报错，但是无法在浏览器中显示index.html，如下：

表示无法找到bundle.js，也就无法生成对应的html页面，这时我们将content-base指定到dist文件夹，就能生成对应的页面了。

 

直接在local host：8080/即可访问页面

 

webpack处理页面各种编码及预处理问题，引入loader（加载器）:

1.例如处理jsx文件，现在index.js文件中写入react语法：

命令行启动webpack-dev-server会报错如下：

没错，缺少适当的加载器来处理这类文件，需要：

命令行：npm i -D "babel-loader@^8.0.0-beta" @babel/core @babel/preset-react

其中，babel-loader用于将es6语法转为es5，避免某些浏览器的不支持情况，@babel/core一般用于转码（具体还没了解），@babel/preset-react用于将jsx语法转为createElement。

 

此时执行命令：npx webpack-dev-server --mode  development --content-base ./dist --module-bind "js=babel-loader?presets[]=@babel/preset-react" (注：window版本需要使用双引号)

这个时候就能成功编译了，而后的各种loader都类似，没太多差别。

 

但是以上都是简单的命令行，但项目需要大量的loader进行文件处理，如果使用命令行则会出现极长的命令，很麻烦。

所以出现了webpack.config.js，对webpack的各种工程进行参数的配置。

 

webpack.config.js参数详解：

1.先在项目根目录创建webpack.config.js，webpack默认读取该文件的配置。