Webpack学习-Webpack初识
一、前言
webpack 到底是个什么东西呢，看了一大堆的文档，没一个能看懂的，因为上来就是给个module.exports 然后列一大堆配置，这个干啥，那个干啥，没一点用。但凡要用一个东西，一个东西火了，首先得知道为什么要用它，它究竟是来干什么的，它有什么好处。webpack 顾名思义，就是web打包，主要是打包一些前端资源的，再通俗点讲，就是把前端用的一些js,css压缩混淆，images fonts什么的也做相应处理，这只是webpack其中的一点功能，对于初学者来说，先知道这些就行了。
因为webpack是基于nodejs开发的一个前端打包工具，所以许多后端人员如果想学的话是比较吃力的，需要先学习一下nodejs，不然其中的一些语法什么都看不懂，一头雾水。webpack还有其他一些功能，也是比较重要的，比如：模块化开发，把所有资源都当成一个模块，用import的方式引入相关js中，甚至连css ,img 都引入进去，这一点也是让我比较吃惊的，具体里边怎么加载到页面上的我也不知道，以后学了再看。
总计一下一句话：webpack是一个前端模块化打包工具。
注意：前边已经说了，webpack是基于nodejs开发的一个前端打包工具，所以使用webpack需要安装node环境，而node环境运行起来需要一系列依赖的包（相当于java中的各种jar，c#中的各种类库了），webpack就属于其中的一个，这么多包就需要一个管理工具来管理，于是乎，就引出了npm，npm就是nodejs中的一个包管理工具，相当于java中的maven，c#中的nuget，这就是这三者之间的关系。
二、起步
2.1 webpack的两种安装方式
1.在cmd下或者其他命令行工具下运行 npm i webpack -g 全局安装webpack,这样 安装完成之后 在命令行工具下输入webpack就会起作用。
2.在项目根目录运行 npm i webpack --save-dev 安装到项目的依赖中，在构建项目时，使用本地开发版的webpack，打包完后就不再用了，因为webpack其实就是来进行打包的，运行的时候是构建好的html、js、css这些东西。
这两种方式的区别时，全局安装webpack，每次在终端运行webpack时，就是使用的全局的webpack，假设你全局安装的webpack是4.0的版本，而你的一个老项目用的是webpack3.0的版本，那你在项目构建的时候就不能直接运行webpack命令了，需要用npm i webpack@3.0 --save-dev ，安装一个3.0版本的webpack，然后这个项目就用刚才安装的3.0版本的webpack来进行构建，这也是要装到本地项目webpack的一个要用到的地方。webpack也是node_modules中的一个模块，如果本地安装后，就可以在本地的依赖中找到它。
局部使用webpack，一般在package.json中的scripts中配置执行的，我们用npm来帮助执行的话，那就是当前项目使用的。
2.2 使用webpack打包构建一个项目
1.新建一个文件夹叫webpack-study，在该目录下执行命令npm init -y,会生成package.json 文件，就是基于webpack的整个项目的配置文件，如图：
这里边包括 项目名称，版本号，描述
项目入口文件：index.js，webpack默认是会直接运行这个index.js文件 然后执行一系列的代码，这里和nodejs的思想是一样的。
脚本代码：scripts 这是项目启动时可以运行的脚本代码，你也可以添加别的代码,比如：使用npm run test，就是执行这里的test脚本，有可能一些命令非常长，直接打不方便，那么就可以在这里配置一下，相当于一个别名。
其他的就不说了。
2.创建项目的基本目录，如下所示，很简单的几个文件
3. 使用 npm i jquery --save 安装jquery类库
4.写代码
在index.html中写一个ul li列表
<!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>
<ul id="list">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
在index.js页面中写
// 导入jquery类库
import $ from 'jquery'
//webpack 使用模块化开发 这里用import 语法 从jquery中导出一个模块 我们给他起个名字叫$ 接下来我们就可以像我们传统使用jquery一样使用它了
console.log($)
// 设置偶数行背景色，索引从0开始，0是偶数
$('#list li:even').css('backgroundColor','lightblue');
// 设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');
接下来我们把index.js引入到index.html 页面 ，直接在浏览器打开，然后就报错了，是因为浏览器现在还不认识 import语法，虽然在es6的标准中已经提到了，但是他们还不支持。
所以我们就不能直接引入这个index.js了，因为用了高级的语法，我们要用webpack对它打包处理一下，变成浏览器能识别的js。
运行 webpack .\src\index.js -o .\dist\bundle.js，意思是把src下边的index.js 打包到dist下的bundle.js ，执行结果如下：dist下边生成了一个bundle.js，内容一大坨，不知道什么玩意。
接下来我们在index.html页面引入bundle.js,成功输出并显示。
以上就是webpack 最简单的使用方式。webpack不仅能打包js,包括css,img 等很多静态资源都能打包，还有很多的第三方插件，帮助前端页面优化，配置。一下简单说一下就不再演示了 。
2.3 实现webpack的实时打包构建
由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
运行cnpm i webpack-dev-server --save-dev安装到开发依赖。
安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，因为此时使用的是全局的webpack-dev-server命令，但是我们并没有全局安装，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，让它变成当前本地的命令就可以了，因为我们已经本地安装了，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中。
把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快。
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录："dev": "webpack-dev-server --contentBase src" 同时修改index页面中script的src属性为<script src="bundle.js"></script>
2.4 使用html-webpack-plugin插件配置启动页面
由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面。
运行cnpm i html-webpack-plugin --save-dev安装到开发依赖。
修改webpack.config.js配置文件如下：
// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
})
]
}
修改package.json中script节点中的dev指令如下："dev": "webpack-dev-server"
将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！
2.5 实现自动打开浏览器、热更新和配置浏览器的默认端口号
修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新："dev": "webpack-dev-server --hot --port 4321 --open"
2.6 使用webpack打包css文件
运行cnpm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
注意这里顺序不能乱，webpack默认是从右到左读取loader的。
2.7 使用webpack打包sass文件
运行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理sass文件的loader模块：{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
2.8 使用webpack处理css中的路径
运行cnpm i url-loader file-loader --save-dev
在webpack.config.js中添加处理url路径的loader模块：{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
2.9 使用babel处理高级JS语法
运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
在项目根目录中添加.babelrc文件，并修改这个配置文件如下：
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}三、webpack中的配置文件
3.1 webpack.config.js
按照以上打包方式肯定太麻烦，还没牵扯到配置什么的，如果文件太多就更麻烦。所以，webpack提供了一个配置文件，打包的时候webpack会自动找到目录下边的webpack.config.js ，它里边需要用nodejs的语法导出一个配置对象，这样webpack就会根据这个对象对目录下边你配置过的资源打包了。下面我们先来简单配置一波，实现我们前边的功能，添加一个webpack.config.js文件，写入下面内容:
const path = require('path')
module.exports ={
entry:{
index:path.join(__dirname,'./src/index.js')
},
output:{
path: path.join(__dirname, './dist'),
filename: 'js/[name].js'
}
}
直接在根目录下运行webpack 命令，就完成了我们刚才的功能。
3.2 项目中的其他文件
简单说一下：
dist：使用 webpack -p 命令后，会把相关配置的文件全部打包到这下面，也就是我们对外发布的目录。
package.json ：使用 npm init -y 后生成的项目配置文件，学过nodejs的应该都是知道，这里边不仅有项目自己的配置，还有包的相关依赖啥的，相当于我们asp.net 中的Web.config、App.config，java中的web.xml等等。
{
"name": "05",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"bootstrap": "^3.3.7",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack-dev-server": "^3.1.4"
},
"devDependencies": {
"webpack": "^4.16.1",
"webpack-cli": "^3.0.8"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
"keywords": [],
"author": "",
"license": "ISC"
}
package-lock.json： npm 4 以上会生成这个文件，里边各种包的依赖清晰明了，包的版本号也被锁定，当你重新安装或者还原node_modules文件夹时，以前是从package.json中解析依赖的比较耗时，而且版本号可以会 恢复的包的最新版本，现在是根据这个文件直接读取依赖关系并还原相关版本。
{
"name": "05",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@webassemblyjs/ast": {
"version": "1.5.13",
"resolved": "http://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.5.13.tgz",
"integrity": "sha1-gRVaVwvVgDow7DFDa8LJwO3jjyU=",
"dev": true,
"requires": {
"@webassemblyjs/helper-module-context": "1.5.13",
"@webassemblyjs/helper-wasm-bytecode": "1.5.13",
"@webassemblyjs/wast-parser": "1.5.13",
"debug": "3.1.0",
"mamacro": "0.0.3"
}
},
.....
}
webpack.config.js ：是webpack打包的配置文件
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},{
test:/.(jpg|png|bmp|gif)$/,
use:'url-loader?limit=31&name=[hash:16]-[name].[ext]'
},{
test:/.(eot|svg|ttf|woff|woff2)$/,
use:'url-loader?limit=31&name=[hash:16]-[name].[ext]'
}]
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
]
}
3.3 常用命令
npm i webpack -g //全局安装webpack
npm i webpack --save-dev // 本地项目安装webpack 要与全局安装配置使用
npm i nrm - g //全局安装 nrm 可以选择 nrm 的包地址
npm i cnpm -g // 全局安装cnpm 和npm差不多 比较快
npm i webpack-dev-server -g //全局安装dev-server 模拟服务器
webpack -p //按配置打包到dist 目录中
//PS: -S就是--save的简写，-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面四、
四、总结
关于webpack的使用这里只介绍一下它是什么，它能干什么，它有什么好处。也能让我们最起码知道，具体深入，以后自己找时间玩。
Webpack学习-Webpack初识的更多相关文章
- webpack学习总结
前言 在还未接触webpack,就有几个疑问: 1. webpack本质上是什么? 2. 跟异步模块加载有关系吗? 3. 可否生成多个文件,一定是一个? 4. 被引用的文件有其他异步加载模块怎么办? ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- webpack学习（入门基础）
webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...
- [译]开始学习webpack
写在前面: 文章翻译自petehunt大神的petehunt/webpack-howto,作为学习webpack的开始.fork了一份,翻译后的在这里https://github.com/zjzhom ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack 学习心得（一）
Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 因为本人也正在学习webpack ,所以此篇文章比较入门. 首先你想使用webp ...
- webpack学习笔记（二）-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- 深入学习webpack（一）
深入学习webpack(一) 模块化的相关库和工具已经很多了,包括require.js.sea.js和一些工程化工具webpack.gulp.grant.那么我们该如何选择呢? 其实,我们只需要掌握了 ...
- webpack学习之路
当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家指出. 在我们开始之前 ...
随机推荐
- 使用 PowerShell 将数据磁盘附加到 Windows VM
本文介绍如何使用 PowerShell 将新磁盘和现有磁盘附加到 Windows 虚拟机. 在开始之前,请查看以下提示: 虚拟机的大小决定了可以附加多少个磁盘. 有关详细信息,请参阅虚拟机大小. 若要 ...
- Oracle EBS OPM 查询现有量
--查询现有量 --created by jenrry DECLARE p_inventory_item_id NUMBER := 231652; --NOT NULL p_organization_ ...
- Jenkins自动构建的几种方式
1.远程URL构建 在任务配置处的构建触发器中选择远程触发,例如,在下图框中输入abc,则只需要在网页上输入地址:Jenkins_URL/job/工程名/build?token=abc 2.利用cur ...
- [SQLSERVER] [RESTORE] 逐步恢复日志备份并使用只读模式查看
执行: USE master GO RESTORE DATABASE MYDB FROM DISK = N'FULL_BACKUP.bak' WITH REPLACE, STANDBY = N'STA ...
- SQLServer导数据到Oracle
从SQLServer导数据到Oracle大概有以下几种方法: 使用SSMS的导出数据向导,使用Microsoft ODBC for Oracle或Oracle Provider for OLE DB连 ...
- PHP支付宝支付开发流程
支付宝开发流程 1.首先我们先谈谈第三方支付 所谓第三方支付就是和一些各大银行签约,并具备一定实力和信誉保障的第三方独立机构提供的交易平台 目前市面上常见的有支付宝,财付通,网银,易宝支付等,网站 ...
- kubeadm快速部署Kubernetes单节点
1. 安装要求 在开始之前,部署Kubernetes集群机器需要满足以下几个条件: 一台或多台机器,操作系统 CentOS7.x-86_x64 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬 ...
- October 13th 2017 Week 41st Friday
The shortest distance between two people is a smile. 人与人之间最短的距离是微笑. I find a smiling face can bring ...
- php大流量高并发解决方案
一.硬件 提升硬件,影响因素有: 带宽-硬盘读写速度-内存大小-cpu处理速度 二.软件 反向代理负载均衡 mysql : 1.优化你的sql和索引 2.加缓存,memcached,redis 3 ...
- 【转】 Android常用实例—Alert Dialog的使用
Android常用实例—Alert Dialog的使用 AlertDialog的使用很普遍,在应用中当你想要用户做出“是”或“否”或者其它各式各样的选择时,为了保持在同样的Activity和不改变用户 ...