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

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

webpack的安装

  1. 目录如下:

webpack基本配置以及webpack-dev-server_第1张图片
3. index.html:
webpack基本配置以及webpack-dev-server_第2张图片
4. main.js
webpack基本配置以及webpack-dev-server_第3张图片
5. webpack.confing.js代码
webpack基本配置以及webpack-dev-server_第4张图片

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

npm i webpack -g

webpack基本配置以及webpack-dev-server_第5张图片

npm install webpack-cli –g

webpack基本配置以及webpack-dev-server_第6张图片

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

webpack基本配置以及webpack-dev-server_第7张图片

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

webpack基本配置以及webpack-dev-server_第8张图片
这里可以测试一下:

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

webpack基本配置以及webpack-dev-server_第9张图片
根据安装提示进行安装:

npm install --save-dev webpack

webpack基本配置以及webpack-dev-server_第10张图片
再次进行测试,发现还有模块找不到,看看是不是没有下载,可以去下载一下
webpack基本配置以及webpack-dev-server_第11张图片

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

webpack基本配置以及webpack-dev-server_第12张图片
最后再次测试,显示成功,但是出现警告,这个可以忽略
webpack基本配置以及webpack-dev-server_第13张图片

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

最后测试:
webpack基本配置以及webpack-dev-server_第14张图片

webpack-dev-server的配置

npm i webpack-dev-server –D

webpack基本配置以及webpack-dev-server_第15张图片

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

webpack基本配置以及webpack-dev-server_第16张图片

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

你可能感兴趣的:(webpack基本配置以及webpack-dev-server)