webpack第一天

已经用了vue和react老久了，但是webpack一直不敢触及，感觉里面的水太深。不想碰却不能不碰，否则之后的路会越来越难走呀。

 

我现在要开始学习啦，然后慢慢记录一下学习体会。

 

1.在命令行运行：npm init -y，快速初始化项目

2.在根目录下，新建src、dist文件夹

3.在src中新建一个index.html、index.js入口文件

4.安装webpack、webpack-cli

在命令行中输入：npm install webpack webpack-cli -D

5.在命令行执行：webpack，会报错

解决办法：

根目录下新建一个文件webpack.config.js

说明：webpack.config.js这个文件向外暴露一个打包的配置对象，因为webpack是基于Node构建的，所以webpack支持所有Node API和语法。webpack4.x中，有一个很大的特性，为了尽量见识少配置文件的体积，默认配置如下：

      （1）默打包入口路径是src -> index.js

      （2）打包的输出文件是dist -> main.js 

6.在index.html中引入打包后的main.js文件

在命令行中执行：webpack

然后在浏览器中打开index.html，在控制台会打印出'hello'

7.为了能够实时打包编译代码，安装webpack-dev-server，安装命令为yarn add webpack-dev -D

在package.json文件中配置‘dev’脚本命令：

在命令行中运行：yarn dev或者 yarn run dev，执行结果如下：

在浏览器中访问http://localhost:8080,

点src进入index.html

此时，修改index.js后访问http://localhost:8080/src/，控制台还是打印’hello‘,而不是’hello3‘

现在是不是有点疑惑，为什么？

 

原因是：webpack-dev-server 默认打包好的main.js文件托管到了项目根目录中而不是硬件磁盘中，我们看不到，但可以看作在根目录中存在一个main.js.

因此，在index.html中我们修改引入的main.js路径：

再次访问页面，结果就变成我们想要的啦：

此时，我们比较了解的一件事是：webpack-dev-server帮我们实时打包编译了main.js放置在根目录下。

我们可以为webpack-dev-server加上更多的配置

--open：打包后自动打开浏览器访问

--open firefox：指定打开的浏览器

--port 3000： 指定端口号

--host 127.0.0.1：指定域名

--hot：默认热更新