带你使用webpack快速构建web项目的方法
使用webpack构建web项目以及热部署插件的使用，按以下步骤，能帮助你快速构建和理解~
详细学习还得靠官方文档！
一，基础构建部分
大前提！你得先安装了Node.js此处不赘述。
1，创建一个文件夹
2，在当前文件夹子下打开命令行工具
3，项目初始化（创建package.json文件）
npm init -y
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
显示安装完成：
5，补充一个依赖-插件：
用途：如果没有此插件需要我们手动给index.html文件引入 bundle.js。使用此插件我们将会自动在打包的时候创建index.html，且无须关心bundle.js的文件路径。
复制粘贴到【命令行工具】回车
npm install html-webpack-plugin --save-dev
插件如何配置使用，html-webpack-plugin官方说明文档
此时查看文件夹内容如下：
6，补充文件结构：
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
打包成功后，此时dist目录下会多一个，bundle.js文件，
若使用html-webpack-plugin插件其实index.html会自动创建并且覆盖原先我自己创建的index.html。
打开dist目录下的index.html文件。查看测试结果
测试打包到虚拟服务器内存
大家都知道的小技巧~
在package.json文件下配置下webpack-dev-server的快捷键。
配置完成后就可以在终端使用：npm run dev 进行打包了。
自动打开页面~注意看地址栏与上边本地打开的区别。
到这里，已经做好了基本的搭建了。
踩过的坑：
不指定版本号直接安装以下依赖：
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项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
webpack+vue2构建vue项目骨架的方法
前端项目打包工具webpack与前端开发框架vue,算是现在前后端分离后非常流行的技术了,今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本骨架.虽然使用vue-cli脚手架可以帮我们搭建好一个项目骨架,但是了解原理我觉得还是很重要的,所以这篇文章主要就写webpack与vue构建一个基础项目.前提是已经安装了nodejs. 整个项目需要通过npm安装的依赖 css : style-loader.css-loader.sass-loader.node-sass js:babe
-
使用Electron构建React+Webpack桌面应用的方法
前言 Electron可以使用HTML.CSS.JavaScript构建跨平台桌面应用,可是在使用到React和Webpack时,会遇到一些配置问题,本文将针对React+Webpack下的Electron配置提供一个通用的解决方案. 环境配置 "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-class-proper
-
详解Webpack实战之构建 Electron 应用
Electron可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的. Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互. 当你在 Electron 应用中的一个窗口操作时,实际上是在操作一个网页.当你的操作需要通过操作系统去完成时,网页会通过 N
-
详解vue-cli之webpack3构建全面提速优化
前言 伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法.但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协.相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老
-
详解webpack+gulp实现自动构建部署
webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 正文 本篇包含以下三点: 1.区分开发环境和生产环境 2.集成gulp 3.package.json 配置 前面主要介绍了w
-
详解用webpack2.0构建vue2.0超详细精简版
npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号 npm install --save-dev babel-core babel-loader babel-preset-es2015
-
详解webpack4多入口、多页面项目构建案例
趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi
-
详解vue-cli快速构建vue应用并实现webpack打包
Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档很全面的. Vue两大核心思想,组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可. 一.什么是vue-cli vue-cli是由
-
浅谈React + Webpack 构建打包优化
本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下: 使用 babel-react-optimize对 React 代码进行优化 检查没有使用的库,去除 import 引用 按需打包所用的类库,比如 lodash . echart 等 lodash 可以采用babel-plugin-lodash进行优化. 需要注意的是 在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这
-
webpack构建react多页面应用详解
写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动
-
webpack构建vue项目的详细教程（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入
-
详解如何提高 webpack 构建 Vue 项目的速度
前言 最近有人给我的 Vue2 后台管理系统解决方案提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间.所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间.那么要怎么去实现呢? 解决方案 DllPlugin 和 DllReferencePlugin 查找了一下资料,发现我们可
-
详解Web使用webpack构建前端项目
好久没写技术博客了, 原因在于最近在学习前端方面的技术, 熟悉我的同学都知道, 之前我有使用Vue搭建了一个个人简历, 体验了一把最新的前端技术, 但之前我们使用的是vue-cli脚手架工具, 对于如何自己实现前端构建工具, 当下最为流行的就是webpack和gulp了, 之前一篇我们讲了gulp, 这一篇我们来好好讨论webpack. 说起webpack, 想必做前端的同学肯定不会陌生, 其实之前我们使用gulp构建的时候, 也使用了webpack的打包技术, 其实gulp和webpack并不