webpack3-[webpack-dev-server]的使用

最新推荐文章于 2023-04-12 19:13:58 发布

Leisure Tea

最新推荐文章于 2023-04-12 19:13:58 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/SevenSongyun/article/details/103768731

webpack 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用webpack3和webpack-dev-server搭建项目，包括webpack-dev-server的作用、通用步骤和常用命令。通过添加`dev`脚本和配置文件，实现了自动打包编译和热部署功能，使得在开发过程中可以自动打开浏览器并实时更新代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack3-[webpack-dev-server]的使用

搭建项目

webpack-dev-server有什么用？
可以用来自动打包编译
通用步骤
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev
npm i jquery -d
安装 webpack-dev-server
npm i webpack-dev-server --save-dev
在 package.json 中的 scripts 中添加
“dev”: “webpack-dev-server”
编写js和html
html中引入js的路径为 /xxx.js
编写配置文件 webpack.config.js
const path = require(“path”)
module.exports = {
entry: path.join(__dirname, ‘./src/js/demo.js’),
output: {
path: path.join(__dirname, ‘./dist’),
filename: “demo.js”
},
mode: “development”
}
启动 webpack-dev-server
npm run dev
注意：webpack-dev-server打包编译后的文件在内存中

webpack-dev-server的常用命令

–open ：自动打开浏览器
–port 端口号：设置端口号，默认为8080
–contentBase 文件夹名：指定托管的根目录
–hot ：热部署，以打补丁的方式打包文件。在css中能以不刷新整个页面来更新样式
–config 配置文件名.js ：设置配置文件，若不配置这个，则默认配置文件为根目录下的webpack.config.js

1.通过"dev": "webpack-dev-server --open --contentBase src --hot"方式

2.通过配置文件的方式"dev1": “webpack-dev-server [–config 配置文件名.js]”

本例使用：webpack.config.js配置文件

const path = require('path')
const webpack = require('webpack')  // 2.要使用hot，需要webpack包

module.exports = {
    entry: path.join(__dirname, './src/js/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: "index-bundle.js"
    },
    mode: "development",
    devServer: {
        open: true,
        contentBase: 'src',
        port: 3002,
        hot: true   // 1.要使用hot，首先将hot设置为true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()    // 3.要使用hot，需要new webpack.HotModuleReplacementPlugin()对象
    ]
}

更新时间：2019-12-30