webpack中devServer的配置及使用
程序员文章站
2022-03-06 13:57:21
...
配置webpack.config.js
代码块
const path = require('path')
module.exports = {
// 指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //入口文件,__dirname表示绝对路径
output: { //输出文件的相关配置
path: path.join(__dirname, './dist'), //路径
filename: 'bundle.js', //文件名称
}
}
说明
1、在项目根目录中创建webpack.config.js文件
2、module.exports是node.js语法意义为向外暴露一个模块,用var 变量名称=require(‘模块标识符’)接收。
3、直接在项目终端中使用命令:webpack打包
devServer的配置
"dev": "webpack-dev-server --open --port 3000 --hot"
安装
npm i -D webpack-dev-server
说明
1、使用npm run dev调用,可以自动打开网页,并且事实监听数据变化
2、open意为打开,port意为端口号,hot意为热更新
3、代码写在package.json中的"scripts"对象下面
4、json文件不能写注释,且不能使用单引号。
5、运行npm run dev会在项目根目录出生成一个bundle.js,因为是放在内存中,所以看不见,但是可以引用,因此需要改为引用根目录的bundle.js文件
扩展
说明
在上一个devServer的配置中我们还需要在index.html中引入根目录生成的js文件,其实我们可以使用工具省略下面这一步。
<script src="/bundle.js"></script>
使用html-webpack-plugin插件
安装
cnpm i html-webpack-plugin -D
导入
const htmlWebpackPlugin = require('html-webpack-plugin')
配置
plugins: [ //这是用来处理插件的
new htmlWebpackPlugin({ //创建一个在内存中生成html的实例
template: path.join(__dirname, './src/index.html'), //指定生成的模板页面
filename: 'index.html'
})
]
解释
导入和配置都写在webpack.config.js文件中plugins需要定义在module.exports中。
上一篇: Webpack(三)插件配置
下一篇: webpack笔记