webpack安装与配置初学者踩坑篇
webpack是基于nodejs开发出来的前端工具
webpack可以处理js文件的依赖关系,webpack能够处理js的兼容问题,把高级浏览器不识别的语法转换成浏览器正常识别的语法
(jnlp是基于task的,webpack是基于项目构建的)
新建项目所需要的各种文件和目录,基础代码
1.安装webpack
1) 全局安装
C:\Users\lmx>npm install webpack -g
C:\Users\lmx>npm install webpack-cli -g
C:\Users\lmx>npm insall webpack-dev-server -g
2) 项目安装
命令行当前文件路径
npm init -y
npm install webpack -D
npm install webpack-cli -D //由于webpack4之后不再包含webpack-li 所以需要单独安装,否则报错
npm install webpack-dev-server -D //用于自动打包生成bundle.js
2. 项目运行
1) 运行方式一:`webpack`命令
错误解决一:
提示使用development模式还是production模式,可以使用 `webpack --mode development` 也可以在 ‘错误解决二’ 中提到的`webpack.config.js` 文件中配置
错误解决二:
webpack默认的需要打包的文件是index.js,而我们使用的是main.js 所以报错,在项目目录中新建名称为 `webpack.config.js` 的文件,基本内容如下:
//默认的路径是以当前项目的根目录文件夹,也就是安装webpack的文件夹目录
const path = require('path') module.exports = {
mode: 'development', //定义运行模式
entry:path.join(__dirname,'./src/main.js'), //需要打包的那个文件
output:{ //打包生成的那个文件
path:path.join(__dirname,'./dist'),
filename :'bundle.js'
},
}
执行 `webpack` 自动生成
2) 运行方式二:
命令行执行: `webpack .\src\main.js .\dist\bundle.js`
注意斜线的朝向
3) 运行方式三:
安装了 `webpack-dev-service` 本地运行,webpack生成的bundle.js并没有存储在物理盘上,而是直接托管到了内存中,所以根目录下可能找不到这个文件
`webpack-dev-service ` 的配置方式有两种:
① 配置方式一:
在 `package.json` 中配置 `webpack-dev-service `
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --mode development --open --port 8081 --contentBase src"
},
--mode development 配置运行的模式
--open 是否运行时打开浏览器(打开的是系统默认打开链接的浏览器)
--port 8081 配置本地打开的端口号
--contentBase src 配置默认浏览器打开的页面是什么下的
② 配置方式二:在 `webpack.config.js` 中配置
const path = require('path') module.exports = {
mode: 'development',
entry:path.join(__dirname,'./src/main.js'),//打包的那个文件
output:{
path:path.join(__dirname,'./dist'),
filename :'bundle.js'
},
devServer:{
open:'true',
port:'8081',
contentBase:'src'
},
}
③ 配置完成之后命令行执行 `npm run dev`
----------------------------------------------------------------------------------------------------------------
至此完成了webpack的基本的运行
webpack安装与配置初学者踩坑篇的更多相关文章
- Opencv环境配置及踩坑
Opencv环境配置及踩坑 1.什么是Opencv OpenCV是一个基于Apache2.0许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux.Windows.Android和[ ...
- Pytorch及Yolov5环境配置及踩坑
Pytorch及Yolov5环境配置及踩坑 1.何为Yolov5 yolo是计算机视觉方面用来进行目标检测的一个十分出名的开源框架,我搜不到官方的对此概括性的定义,但实际上也没什么必要,更重要的是会使 ...
- Ubuntu 16.04 安装Mysql 5.7 踩坑小记
title:Ubuntu 16.04 安装Mysql 5.7 踩坑小记 date: 2018.02.03 安装mysql sudo apt-get install mysql-server mysql ...
- 小白linux安装php 5.6+nginx配置(踩坑版)
因为要搭建个知识库,直接用wordpress,这前提是得先装php,实在不喜欢XAMPP,所以自己折腾,没想到php这一来还不少啊,从头到尾折腾了一个小时多.记录下主要的流程和遇到的坑. 首先官网下载 ...
- vue配置环境踩坑
Vue 环境配置踩坑 目录 Vue 环境配置踩坑 windows下cnpm -v :无法将"cnpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. windows下c ...
- React Native Android配置部署踩坑日记
万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...
- (最新)VS2015安装以及卸载过程——踩坑实录
前言 Visual Studio (简称VS)是微软公司旗下最重要的软件集成开发工具产品.是目前最流行的 Windows 平台应用程序开发环境,也是无数人学习编程的入门软件之一.Visual Stud ...
- 虚拟机安装Linux过程和踩坑
由于想学习node,服务器端大都使用Linux系统,所以就想着在笔记本上弄个虚拟机,装上Linux,使用xshell在window上操作也方便,也借此来熟悉一下Linux,接下来就解释下安装的步骤和遇 ...
- Webpack安装和配置
一.安装和配置webpack 1.全局安装webpack 这样就安装好了webpack,可以再全局通过webpack -v来查看是否安装成功. 2.先创建项目目录结构,根目录是mywebpack.进入 ...
随机推荐
- React Native 项目整合 CodePush 全然指南
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...
- Linux 目录结构_004
前言 Linux文件系统层次标准,英文全称Filesystem Hierarchy Standard,英文简称FHS. 由于利用Linux来开发产品的团队和个人实在太多了,如果每个人都以自己的想法来配 ...
- [IR] Search Server - Sphinx
使用 Sphinx 更好地进行 MySQL 搜索 - IBM 尽管 MySQL 是一个出色的通用数据库,但是如果您的应用程序需要进行大量搜索,那么使用 Sphinx 可获得更好的性能. 尽管 Sphi ...
- 关于Kafka Fetch Session的讨论
Kafka在1.1.0版本引入了fetch session的概念,旨在降低“无效”FETCH请求对集群带宽资源的占用.故事的背景是这样的: 众所周知,Kafka的broker和consumer都会定期 ...
- mui---计算缓存大小及清除缓存
在做APP项目的时候,考虑到APP的的缓存文件太大,会考虑在APP内部设置清除缓存的功能. 具体方法: http://www.dcloud.io/docs/api/zh_cn/cache.html h ...
- 60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
- redis(二)--用Redis作MySQL数据库缓存
用Redis作MySQL数据库缓存,必须解决2个问题.首先,应该确定用何种数据结构存储来自mysql的数据:在确定数据结构之后,还要考虑用什么标识作为该数据结构的键. 直观上看,Mysql中的数据都是 ...
- Jexus .Net at System.Net.Sockets.Socket.Connect (System.Net.IPAddress[] addresses, System.Int32 port)
环境:Jexus(独立版)+MVC(5.2.3) +Redis+EF(6.0) Application Exception System.Net.Sockets.SocketException Con ...
- STL的基本介绍
STL是标准模板库,现在是c++的一部分 STL被组织为下面的17个头文件:<algorithm>.<deque>.<functional>.<iterato ...
- .NET Core开发日志——Middleware
熟悉ASP.NET架构的开发者一定对于HTTP Modules与HTTP Handlers不陌生.两者的作用主要是对网络请求执行特定的处理工作.而在.NET Core中,它们都被Middleware( ...