Webpack第二天

Posted 2021-04-29 coding个人笔记

第一天学了配置文件和简易打包，今天先使用几个插件，说白了，webpack不难，难的就是要记很多插件和配置。

 

首先，我们当然是希望先跑起来，虽然只有一个页面，这时候我们要先安装开发服务器，这是node的快捷服务器：

cnpm install webpack-dev-server -D

 

然后在webpack.config.js里面配置，可以百度webpack-dev-sever的各种配置。安装完成之后直接npx webpack-dev-server就可以打开我们的index.html了。因为我们还没配置，默认打开根目录，我们都知道网页默认会去显示index.html。我们可以加相对目录去访问。

 

 

先不说配置，我们每次都使用npx加各种插件的名字，是不是很麻烦，所以我们先在package.json里面配置运行命令，先配置打包和运行的两个命令

 

这样我们只需要npm run build和npm run start（start可以直接npm start）就可以了。

 

我们用过框架的都知道跑多个项目的时候，端口号不能一样，webpack-dev-server默认的都是8080，所以我们配置几个简单的参数：

devServer: {
    contentBase: './',//访问的目录，默认根目录，所以要是访问根目录可以不配
    port: 8081,//端口
    open: true,//自动打开浏览器
},

更多配置可以去Git的webpack-dev-server查看。

 

跑起来之后，我们就可以在html里面编写内容了，编写完之后F5刷新就可以了。

（完）

Coding 个人笔记