webpack进阶

最新推荐文章于 2023-12-09 13:56:14 发布

VIP文章 LucasLi2016

最新推荐文章于 2023-12-09 13:56:14 发布

阅读量152

点赞数

分类专栏：前端文章标签： webpack vue.js

本文链接：https://blog.csdn.net/LucasLi2016/article/details/104877974

版权

webpack实际开发

webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。
创建一个新的程序目录，这里我们创建webpacktest02目录，将webpack入门程序的代码拷贝进来，并在目录下创
建src目录、dist目录。
将main.js和model01.js拷贝到src目录。

安装配置

1、安装webpack-dev-server
使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
在webpacktest02目录打开cmd，执行：

cnpm install [email protected] [email protected] [email protected] --save-dev

安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。
2、配置webpack-dev-server
在package.json中配置script

"scripts": {
    "dev":"webpack-dev-server --inline --hot --open --port 5008"
  },

说明：

--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

此时package.json的文件内容如下：

{
   
  "scripts": {
   
    "dev":"webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
   
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

devDependencies：开发人员在开发过程中所需要的依赖。
scripts：可执行的命令

配置webpack.config.js

在webpacktest02目录下创建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配
置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。
html-webpack-plugin的作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一
个index.html文件。
1、配置模板文件
将原来的vue_02.html作为模板文件，为了和内存中的index.html文件名区别，注意将vue_02.html中的script标签
去掉，内容如下：

<!DOCTYPE html>
<html lang="en" xml

最低0.47元/天解锁文章

LucasLi2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack进阶

webpack实际开发webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。创建一个新的程序目录，这里我们创建webpacktest02目录，将webpack入门程序的代码拷贝进来，并在目录下创建src目录、dist目录。将main.js和model01.js拷贝到src目录。安装配置1、安装webpack-dev-server使用 webpa...
复制链接

扫一扫