webpack4快速上手

梦里梦外; 2021-11-11 08:20 367阅读 0赞

1.在项目根目录cnpm init -y初始化。生成package.json文件

![1737787-20190712102327111-1248808195.png][]

2.在项目里面使用cnpm安装webpack

![1737787-20190712102110246-1119893303.png][]

3.需要在根目录下新建webpack.config.js文件（在其里面配置暴露对象）

module.exports = {
                mode:'development'
                     }

4.在根目录下新建src/index.js文件（因为此时运行会提示根目录下差个src文件下的index.js文件。默认打包入口文件）

![1737787-20190712102657273-301169562.png][]

最基本的webpack就搭建好了，此时是0配置，

简单配置一下：

**实现自动打包编译**

1.安装webpack-dev-server

![1737787-20190712105134813-1451925718.png][]

2.配置（package.json文件配置）

![1737787-20190712105301079-48151501.png][]

\--open   自动打开浏览器

\--port 3000  指定默认端口

\--host   指定域名

\--progress  打包进度

\--compress  压缩

![1737787-20190712105921770-1105011654.png][]

打包好的main.js文件会托管于根目录下，但我们看不到，在内存里面，可以通过域名打印出来

而且这个main.js会自动导入到index。html首页

![1737787-20190712104413530-314883485.png][]

**实现自动跳转到首页**

（在内存中也托管一个index.html页面）

1.cnpm安装html-webpack-pluign。

![1737787-20190712113946876-1380005872.png][]

2.在webpack.config.js中配置

![1737787-20190712114110718-384819861.png][]

此时自动打包编译后就会自动跳转到index首页，实现了和脚手架一样的功能。

转载于:https://www.cnblogs.com/ll15888/p/11175206.html

[1737787-20190712102327111-1248808195.png]: /images/20211109/68e59d98a93b40d0a56ad0c086054e49.png
[1737787-20190712102110246-1119893303.png]: /images/20211109/ef9cf18b536e422fa384060341ef3f03.png
[1737787-20190712102657273-301169562.png]: /images/20211109/0090f6946c2b48e687d432a98045f8b9.png
[1737787-20190712105134813-1451925718.png]: /images/20211109/a3d7b4b74b234c13a7b4af5c9e7b2fe9.png
[1737787-20190712105301079-48151501.png]: /images/20211109/acf7f4a256f14c1cb8b6725814180065.png
[1737787-20190712105921770-1105011654.png]: /images/20211109/0e43c2f8a42b45eab61922d08bf0b7da.png
[1737787-20190712104413530-314883485.png]: /images/20211109/0a84bd23c2e8405f910663c2e59ab84d.png
[1737787-20190712113946876-1380005872.png]: /images/20211109/24655370c3aa4bb7a53d525b73eba454.png
[1737787-20190712114110718-384819861.png]: /images/20211109/790a3fed895e4b52bf2ea942262f9b0f.png