Web | Webpack快速上手
概述
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
一般我们在开发中都是使用终端去进行安装,使用npm,关于npm是什么,在这里就不进行详细描述,自行搜索.在这里只需要知道npm是一个包管理工具和它的一些基本的指令就行,如果安装了node.js的,它里面会自动也帮你安装这个工具.
关于npm(node package manager)的基本指令
- 查看版本 npm -v
- 安装npm npm install npm -g
- 指定版本安装 npm install npm@5.5.1 -g
- 初始化(生成package.json) npm init
- 全局安装 npm i -g
- 全局卸载 npm uninstall -g
- 全局路径 npm root -g
- 局部安装 npm i --save(生产环境,默认) npm i --save-dev(开发环境)
- 安装json中记录的模块 npm install
- 发布 npm publish
webpack
准备
在使用webpack之前,我们需要对其进行安装.这里的安装分为全局安装和局部安装.
全局安装就是安装在计算机全局环境中,在任意的目录下都可以使用;
局部安装一般就是安装在项目的目录下,只有在项目的根目录下使用.
一般建议都进行全局和局部安装.
- 全局安装指令
// -g global全局
npm install --save-dev webpack -g //开发环境
npm install --save webpack -g //生产环境,默认
如果是4+以上的版本,不管是全局安装还是局部安装都需要再次安装-cli版本
// -g global全局
npm install --save-dev webpack-cli -g //开发环境
npm install --save webpack-cli -g //生产环境,默认
指定版本
npm install webpack@<version>
- 局部安装
局部安装是需要在项目目录下,执行安装指令.
npm install --save-dev webpack //开发环境
npm install --save webpack //默认环境
3.配置文件相关
- package.json
- package-lock.json
- webpack.config.js
打包示例
简单进行打包和配置本地服务器功能的示例.
- 准备如图的项目文件夹和示例文件
//index.js
var box = require('./other.js')();
document.querySelector("#root").appendChild(box);
// other.js
module.exports = function(){
var box = document.createElement("div");
box.innerHTML = "hello,webpack";
return box;
};
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
</body>
<script src="./bundle.js"></script>
</html>
- 进行本地安装webpack
//分别在目录执行以下脚本
npm i --save-dev webpack
npm i --save-dev webpack-cli
安装成功后,项目内会多出一个文件和一个文件夹
文件夹是存放包的,配置文件是各种信息.
- 创建配置文件package.json和webpack.config.js
//在package.json文件中
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack-cli": "^3.2.3",
"webpack": "^4.29.5"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" //加上这个,前提是已经全局安装webpack,记得删掉此注释,因为json不支持.
},
"keywords": [],
"author": "",
"license": "ISC"
}
//在webpack.config.js中
module.exports = {
entry: __dirname + "/public/index.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/main",//打包后的文件存放的地方
filename: "bundle.js"//打包后输cl出文件的文件名
}
}
- 这个时候可以直接使用脚本命令进行打包
npm start //因为在配置文件package.json中配置了start命令,所以可以直接使用.
- 打包结果
配置本地服务
- 这个时候也需要再安装一个包
npm install --save-dev webpack-dev-server
- 然后在package.json和webpack.config.js需要加入一些配置
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/public/index.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/main",//打包后的文件存放的地方
filename: "bundle.js"//打包后输cl出文件的文件名
},
devServer: {
contentBase: "./main",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
// packgae.json
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack-cli": "^3.2.3",
"webpack": "^4.29.5"
},
"devDependencies": {
"webpack-dev-server": "^3.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open" //加上这句,可以快捷使用脚本命令
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 运行脚本
npm run server
- 成功以服务器的形式运行,你可以看到URL的前缀不再是以file协议名开头.
Web | Webpack快速上手的更多相关文章
- Webpack 快速上手（下）
杏仁前端开发工程师,代码洁癖症早期,关注前端技术. 由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件 ...
- 【转】Webpack 快速上手（下）
由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件输入和输出 中篇介绍了 webpack 在输入和输出 ...
- 【转】Webpack 快速上手（中）
由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件输入和输出 中篇介绍了 webpack 在输入和输出 ...
- 【转】Webpack 快速上手（上）
嫌啰嗦想直接看最终的配置请戳这里 webpack-workbench (https://github.com/onlymisaky/webpack-workbench) 由于文章篇幅较长,为了更好的阅 ...
- Web | jQuery快速上手
jQuery伴随前端走过一段辉煌的时光,虽然现在已经慢慢的走下顶峰,但是过去的很多项目都是用jQuery写的,它的一些封装思想也非常值得借鉴,懂得jQuery是前端必不可少的. jQuery顶级对象 ...
- 从零开始学 Web 之 Ajax（三）Ajax 概述，快速上手
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- webpack快速入门——webpack3.X 快速上手一个Demo
1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...
- npm、webpack、vue-cli 快速上手
npm+webpack+vue-cli快速上手 Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...
- 简明易懂，将细节隐藏，面向新手树立web开发概念——学完Java基础语法，超快速上手springboot+mybatiJavaWeb开发
简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...
随机推荐
- oracle删除归档日志
查看归档模式: SQL> archive log list; Database log mode Archive Mode Automatic archival Enabled Archive ...
- C# 读取excel用户列表过滤一个月内未收到外部邮件已离职的员工
1.通过aspose.cells读取excel中的数据并添加到list中 //存储从excel中读取出来的数据 List<UserInfo> lst_userinfo = new List ...
- <Android 基础（二十二）> EditText 无法显示完全以及尝鲜Android N
前言 最近将Android Studio更新到了2.2 ,模拟器的Android版本也来到了最新的Nougat.很令人兴奋的一件事情呢! 对, 我就是这么没出息.文章结尾来几张图. 问题 最近遇到一个 ...
- ERP行业销售如何挖掘潜在客户？
要看不同阶段,小企业发展到一定程度,第一个需求是单体财务系统.因为这个时候财务忙不过来了.在大一点就需要业务系统了,就是生产+进销存.有分公司就有集团级软件需求,接着就是oa啊HR啊上下游管理啊等等. ...
- asp.net mvc4 小问题
最近在学习mvc4中间出现一些问题.留作记录.. 1.新建立的项目在vs2013中运行后会出现一个长轮询..这个叫browserLink 是vs2013中新加入的东西.至于更多解释.直接百度.. 关闭 ...
- C# winform Visual Studio Installer打包教程
C# winform Visual Studio Installer打包教程 软件在功能开发实现后,其实并没有真正的完成.对于一个专业的开发者来说,Release软件应该是以安装版本的形式进行发布的 ...
- 巧用花生壳将局域网内的FTP和www服务器发布到互联网
一.目的:用生壳发布FTP和mail服务器到互连网. 二.网络环境:(出租房多家共用路由器上网,ADSL的1Mbps带宽,动态PPPOE拨号,帐号和密码存储在soho路由器中,路由器自动联机上网,并为 ...
- Hadoop配置文件详解
1 获取默认配置 配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知 ...
- C#的抽象类和接口的区别，在什么时候使用才合适？
理解抽象类 abstract class和interface在c#语言中都是用来进行抽象类(本文 中的抽象类并非从abstract class翻译而来,它表示的是一个抽象体,而abstract cl ...
- centos7 docker 使用pipework 做虚拟机
网卡配置文件 及 bridge的静态配置 centos7 Bridge配置 [root@mon-1 ~]# cd /etc/sysconfig/network-scripts/ [root@mon- ...