2、webpack4.0 webpack-dev-server以及html模板

最新推荐文章于 2022-05-18 23:38:38 发布
最新推荐文章于 2022-05-18 23:38:38 发布
阅读量1.2k 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ymwwow/article/details/90141964
版权
本文介绍了如何使用webpack-dev-server创建一个本地服务，通过`npm run dev`简化启动命令。在webpack配置中添加devServer以解决访问目录而非HTML的问题。同时，引入html-webpack-plugin插件，自动化将打包后的JS文件插入到HTML中，简化开发流程。
摘要由CSDN通过智能技术生成

1、webpack-dev-server

当我们在写好文件的时候，index.html只能手动打开来看效果，所以这里介绍使用webpack-dev-server写一个服务，在浏览器中打开

localhost：8080

形式 ，这样就比较方便

安装webpack-dev-server，打开项目的终端

yarn add webpack-dev-server -D   //开发环境中才会用到

 安装完毕之后直接可以输入一以下命令就可以通过命令行打开

npx wepack-dev-server

但是我们不想输入这么长的命令，我们想以下面这种形式开启服务

npm run dev 

打开package.json  在scripts里面增加

"scripts": {
    "dev": "webpack-dev-server",       //增加这一条
    "build": "webpack --config webpack.config.js"
  },

但是依然会发现通过浏览器打开的网页访问是目录，而不是html文件，这个时候可以在webpack-config-js增加devServer的配置，如下：

devServe
最低0.47元/天 解锁文章
YmwWow
关注
专栏目录
【webpack】css引入
逆风飞翔的代码狗
07-28 460
webpack -css的引入 前面我们说到webpack-dev-server可以运行的时候将文件解析到内存中直接运行，但是我们没有提到css样式在webpack中的引用： 我们新建了index.scss，然后通过require对css样式进行引入使用，会发现报错，其实就是缺少了css样式的处理工具： 里面的appropriate loader就指明了缺少相应的装载器，此时我们需要去看官网里面所提供的的loader（webpack所有的文件都可以加载成js文件进行使用，） webpack loader（
webpack系列之webpack-dev-server 及配置HTML插件（html-webpack-plugin）
一起的远方的博客
03-06 5725
上一节补充： 如果存在webpack.config.js文件，则运行npx webpack命令后，将会自动读取文件内的相关配置。我们将webpack.config.js文件名改为webpack.config.my.js文件，那么怎么才能手动指定webpack读取webpack.config.my.js文件里的配置内容呢？别着急，你可以通过如下命令进行实现。 npx webpack --confi...
webpack-dev-server模块
weixin_33853794的博客
10-27 86
前言 webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。它在服务器端使用webpack-dev-middleware进行webpack构建打包；并在客户端注入一份runtime，用于接受服务器端的构建打包后信息。只需要提供一份简单的webpack配置文件，在命令行中运行wbepack-dev-...
【Webpack】常用的插件：webpack-dev-server、html-webpack-plugin
在热爱技术的路上一直前行。
05-09 490
1、Webpack插件的作用 通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更加方便。 2、最常用的webpack插件有以下两个： （1）webpack-dev-server 类似于node.js 阶段用到的nodemon工具 每当修改了源代码，webpack会自动进行项目的打包和构建 （2）html-webpack-plugin —— 将指定的文件复制到内存中运行 webpack中的HTML插件（类似于一个模板引擎插件）； 可以通过此插件自定制ind
webpack打包（主要是处理html文件），并启动服务器
jiang7701037的博客
08-02 3957
这篇文章主要说一下，如何在webpack打包过程中，处理html文件。 项目目录结构 现在需要，通过webpack打包后，把所有的打包结果放在项目目录下的build目录下，直接启动webpack-dev-server进行运行。 一、安装插件： 1、ExtractTextPlugin： npm iextract-text-webpack-plugin --save-dev 2、h...
webpack4.0基础-知识记录
weixin_44489222的博客
09-01 161
webpack构建工具-基础 学习地址 https://www.bilibili.com/video/BV1e7411j7T5 官方文档 https://webpack.docschina.org/ 依赖环境 Node 10 Webpack 4.26以上 webpack下载安装 npm I webpack-cli –g webpack基础打包 开发环境 webpack entrysrc –o outsrc –mode=development 生产环境 webpack entrysrc –o out
三、webpack4.0优化
qq_25354709的专栏
02-20 579
一、noParse 新建一个 WEBPACK-OPTIMIZE 项目。 主要来讲一下webpack的优化。 初始化package.json。 npm init -y 安装： npm install webpack webpack-cli html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/pre...
二、webpack4.0配置篇
qq_25354709的专栏
02-19 337
一、打包多页应用 新建一个项目，里面新建src目录，在src目录新建index.js 和 other.js。 src/index.js: console.log('index.js') src/other.js: console.log('other.js') 初始化package.json: npm init -y  安装： npm install webpack ...
React+Webpack4.0+ES6+Antd最新版环境搭建代码-2018年
08-24
devServer: { contentBase: './dist', hot: true }, ``` 在`package.json`中： ``` "scripts": { "start": "webpack-dev-server --config webpack.config.js --hot" } ``` 10. **运行项目**：最后，...
webpack---devServer
weixin_43390711的博客
05-18 177
devServer: { // 指定运行代码的目录，一般也是所有资源的输出目录 contentBase: resolve(__dirname, 'dist'), // 监视contentBase目录下所有文件，一旦发生变化就reload watchContentBase: true, watchOptions: { // 让监视更高效 ignored: /node_modules/ }, // 启动gzip压缩 .
webpack 执行 npx webpack-dev-server 报错 static heartbeatInterval = 1000
m0_58893670的博客
03-09 123
使用 npx webpack-dev-server打包的时候报错 最后发现是因为我安装的node版本 过低 解决方法： 安装高版本node webpack-dev-server v4.0.0+ 要求 node版本必须 >= v12.13.0，webpack >= v4.37.0 ...
想了解Webpack，看这篇就够了
华为云官方博客
10-28 1716
摘要：Webpack是一种前端资源构建工具，一个静态模块打包器。 1. 摘要 Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。 图1-1 Webpack打包流程图 2. Webpack五个核心概念 2.1 Entry 入口(Entry)指示Webp
Webpack——05——使用开发服务器devServer
x1037490413的博客
11-27 461
我们用原来的代码举例，打包其他资源里的代码 当我们打包好之后，build文件夹里生成了index.html文件，但是我们想修改代码，但是显示不出来，运行看到的东西还是之前构建的，重新打包终端输入webpack才行，这样重复打包的过程很麻烦，devServer就是自动帮我们打包的工具，那么如何配置呢？ 开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器） 特点：只会在内存中编译打包，不会有任何输出 启动devServer指令为：npx webpack-dev-server(这个
npx webpack-dev-server, module not found
weixin_43814775的博客
10-22 1574
想看Stack Overflow的话：链接 webpack-dev-server 当在Terminal运行 npx webpack-dev-server的时候出现这种Error！ Error: Cannot find module 'webpack-cli/bin/config/config-yargs' Require stack: - D:\webpack workspace\test5\node_modules\webpack-dev-server\bin\webpack-dev-s
【webpack】DevServer运行时webpack-dev-server插件报错：Cannot find module ‘webpack-cli/bin/config-yargs
这道题我不会做...不会做啊..太难了！！
05-13 443
文章目录前言原因解决方法 前言 使用webpack的开发服务器(DevServer)进行热部署时，运行npx webpack-dev-server命令时，运行报错了 原因 本地默认安装的新版webpack5与相关协作的功能包并不兼容 解决方法 因为不想回退webpack版本，所以就查阅官方文档，发现最新的运行命令为：npx webpack serve ...
Webpack引入dev-server实现自动编译运行并搭建基本的开发环境与CSS处理
Always-Learning
11-25 388
配置dev-server 安装相关包 npm i webpack-dev-server@3.10.3 增加配置项 devServer: { contentBase: resolve(__dirname,'build'), compress: true, port: 3000, open: true } 下面我们对配置项进行一一解读。 contentBase：指定服务器的启动路径。 compress：是否进行压缩。 port：服务器的启动端口号。 open:
使用webpack-dev-server搭建本地服务器
webchang的博客
01-16 610
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
Webpack devServer 配置及开发环境的配置
专注前端技术，包括Web端、移动端、小程序、APP
06-20 1856
在前面讲过的webpack的简单使用中已经完成了webpack的基本配置，在你完成代码的编写之后，在命令行执行webpack命令打包即可。但是这种方式会比较麻烦，你在开发过程中需要多次进行调试，每次写完代码都需要进行打包就有些浪费时间了，所以我们可以进行配置热编译——devServer的配置。 在你的webpack.config.js文件中，引入下面的配置，接着在控制台进行安装webpack-dev-server ： 安装命令： npm i webpack-dev-server -D 启动devServe
webpack webpack-cli webpack-dev-server配置
最新发布
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值