欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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