带你使用webpack快速构建web项目的方法


Posted in Javascript onNovember 12, 2020

使用webpack构建web项目以及热部署插件的使用,按以下步骤,能帮助你快速构建和理解~
详细学习还得靠官方文档!

一,基础构建部分

大前提!你得先安装了Node.js此处不赘述。

1,创建一个文件夹

带你使用webpack快速构建web项目的方法

2,在当前文件夹子下打开命令行工具

带你使用webpack快速构建web项目的方法

3,项目初始化(创建package.json文件)

npm init -y

带你使用webpack快速构建web项目的方法

4,安装依赖

版本搭配如下:

"devDependencies": {
  "webpack": "^4.17.1",
  "webpack-cli": "^3.3.9",
  "webpack-dev-server": "^3.8.2",
 }

复制粘贴到【命令行工具】回车,安装依赖以上依赖,会自动在package.json写入上述依赖。

npm install webpack@^4.17.1 webpack-cli@^3.3.9 webpack-dev-server@^3.8.2 --save-dev

显示安装完成:

带你使用webpack快速构建web项目的方法

5,补充一个依赖-插件:

用途:如果没有此插件需要我们手动给index.html文件引入 bundle.js。使用此插件我们将会自动在打包的时候创建index.html,且无须关心bundle.js的文件路径。

复制粘贴到【命令行工具】回车

npm install html-webpack-plugin --save-dev

插件如何配置使用,html-webpack-plugin官方说明文档

此时查看文件夹内容如下:

带你使用webpack快速构建web项目的方法

6,补充文件结构:

带你使用webpack快速构建web项目的方法

7,补充webpack.config.js的内容:

webpack官方说明文档整理出来给你后续自己补:
1,webpack的基础配置
2,webpack-dev-server的官方说明文档
3,html-webpack-plugin官方说明文档

// webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './src/main.js',//定义入口文件
  output: {
    filename: 'bundle.js',//定义输出文件名称
    path: path.resolve(__dirname, 'dist')//定义输出文件路径
  },
  devServer: {//配置webpack-dev-server(开发环境用的热部署)
    contentBase: "./dist",//定义默认打开路径,会自动寻找该路径下的index.html文件。
    host:"localhost",//定义主机
    port:8000,//定义端口号
    open:true//定义是否自动打开页面
  },
  plugins: [
    new htmlWebpackPlugin()//配置此插件会自动生成一个index.html并且自动引入bundle.js从而我们无需关心bundle.js的路径问题。
  ]
};

在main.js文件编写测试代码。

document.write("hello webpack!!")

二,测试部分

测试打包到本地

注意:若不使用html-webpack-plugin则需要在dist目录下的index.html里手动引入js文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="bundle.js"></script>
</head>
<body>

</body>
</html>

终端输入:webpack

带你使用webpack快速构建web项目的方法

带你使用webpack快速构建web项目的方法

打包成功后,此时dist目录下会多一个,bundle.js文件,
若使用html-webpack-plugin插件其实index.html会自动创建并且覆盖原先我自己创建的index.html。

带你使用webpack快速构建web项目的方法

打开dist目录下的index.html文件。查看测试结果

带你使用webpack快速构建web项目的方法

测试打包到虚拟服务器内存

大家都知道的小技巧~

在package.json文件下配置下webpack-dev-server的快捷键。

带你使用webpack快速构建web项目的方法

配置完成后就可以在终端使用:npm run dev 进行打包了。

自动打开页面~注意看地址栏与上边本地打开的区别。

带你使用webpack快速构建web项目的方法

到这里,已经做好了基本的搭建了。

踩过的坑:
不指定版本号直接安装以下依赖:

webpackwebpack-cliwebpack-dev-server

npm install webpack webpack-cli webpack-dev-server --save-dev

使用热部署(webpack-dev-server)会出现如下报错:

Error: Cannot find module 'webpack-cli/bin/config-yargs'

出现该报错的小伙伴可以尝试文章中提到的搭配的版本~

webpack默认只能打包json模块和js模块,对于其他模块的打包例如css,图片,等需要借助于相应的loader插件~下次有机会继续分享。

 到此这篇关于带你使用webpack快速构建web项目的方法的文章就介绍到这了,更多相关webpack构建web项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 #Javascript
详解vue 组件的实现原理
Nov 12 #Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 #Javascript
vue 图片裁剪上传组件的实现
Nov 12 #Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 #Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 #Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 #Javascript
You might like
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
python抓取网页中链接的静态图片
2018/01/29 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
法国足球商店:Footcenter
2019/07/06 全球购物
毕业生就业自荐信
2013/12/04 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
给女朋友的道歉信
2014/01/10 职场文书
列车长先进事迹材料
2014/01/25 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
校运会新闻稿
2015/07/17 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL