webpack基本配置以及webpack-dev-server

安装webpack以及webpack-dev-server的小结

webpack的安装

1. 目录如下：

3. index.html：

4. main.js

5. webpack.confing.js代码

配置文件以及准备就绪，现在进行安装

npm i webpack -g

npm install webpack-cli –g

进行初始化：npm init -y
可以生产一个 package.json 文件

导入 Jquery.js 文件
npm i jquery -S

这里可以测试一下：

webpck ./src/main.js -o ./dist/bundle.js

根据安装提示进行安装：

npm install --save-dev webpack

再次进行测试，发现还有模块找不到，看看是不是没有下载，可以去下载一下

插件: npm install html-webpack-plugin --save-dev

最后再次测试，显示成功，但是出现警告，这个可以忽略

可以在webpack.config.js 文件中设置 module.exports={mode:’production’}

最后测试：

webpack-dev-server的配置

npm i webpack-dev-server –D

可以使用这个命令打包: npx webpack-dev-server
但一般都是直接使用配置文件去打包的

关键配置命令如下:
devServer:{ //开发服务器配置
		port:3000,//设置端口号
		progress:true,//打包的时候显示进度条
		contentBase:'src',//指定目录作为打包后的静态服
		open:true,//自动打开浏览器
		}