我们先看看官方的解释：
但是它是什么呢？用概念解释概念，还是不清晰。
打包如何理解呢？
和grunt/gulp的对比
grunt/gulp的核心是Task
我们来看一个gulp的task
我要评论const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('js', () => {
gulp.src('src/*.js')
.pipe(babel({
presets:['es2015']
}))
.pipe(gulp.dest('dist'))
});
什么时候用grunt/gulp呢？
所以，grunt/gulp和webpack有什么不同呢？
安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
查看自己的node版本：
node -v
全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)
npm install webpack@3.6.0
局部安装webpack（后续才需要）
--save-dev是开发时依赖，项目打包后不需要继续使用的。cd 对应目录
npm install webpack@3.6.0 --save-dev
为什么全局安装后，还需要局部安装呢？
我们创建如下文件和文件夹：
文件和文件夹解析：
mathUtils.js文件中的代码：
function add(num1, num2) {
return num1 + num2;
}
function mul(num1, num2) {
return num1 * num2;
}
//commonJS 导出方式
module.exports = {
add,
mul
}
main.js文件中的代码：
//commomJS导入
const {add, mul} = require('./mathUtil.js');
console.log(add(20, 12));
console.log(mul(20, 12));
//ES6导入
import {name, age, height} from "./info";
console.log(name);
console.log(age);
console.log(height);
现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。
我们应该怎么做呢？使用webpack工具，对多个js文件进行打包。
OK，如何打包呢？使用webpack的指令即可
webpack src/main.js dist/bundle.js
打包后会在dist文件下，生成一个bundle.js文件
<body>
<script src="./dist/bundle.js"></script>
</body>
我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
当然可以，就是创建一个webpack.config.js文件
//利用配置文件设定webpack的目标文件和出口文件
const path = require('path');
module.exports = {
//入口
entry: './src/main.js',
output: {
//动态获取出口的绝对路径
//resolve进行路径的拼接，dirname是一个全局变量，进行路径拼接记录
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？
第一步，项目中需要安装自己局部的webpack
npm install webpack@3.6.0 --save-dev
第二步，通过node_modules/.bin/webpack启动webpack打包
node_modules/.bin/webpack
但是，每次执行都敲这么一长串有没有觉得不方便呢？
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
npm run buildoader是webpack中一个非常核心的概念。
webpack用来做什么呢？
loader使用过程：
大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。
项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。
normal.css中的代码非常简单，就是将body设置为red
body {
background-color: red;
}
但是，这个时候normal.css中的样式会生效吗？
在入口文件中引用：
require('./css/normal.css');
重新打包，会出现错误,这个错误告诉我们：加载normal.css文件必须有对应的loader。
在webpack的官方中，我们可以找到如下关于样式的loader使用方法：
按照官方配置webpack.config.js文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEdvfqEA-1595299971112)(https://s1.ax1x.com/2020/07/17/UyIPQs.png)]
重新打包项目：
但是，运行，你会发现样式并没有生效。
我们来安装style-loader
npm install --save-dev style-loader
注意：style-loader需要放在css-loader的前面。
疑惑：不对吧？按照我们的逻辑，在处理css文件过程中，应该是css-loader先加载css文件，再由style-loader来进行进一步的处理，为什么会将style-loader放在前面呢？
答案：这次因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。
目前，webpack.config.js的配置如下
const path = require('path');
module.exports = {
//入口
entry: './src/main.js',
output: {
//动态获取出口的绝对路径
//resolve进行路径的拼接，dirname是一个全局变量，进行路径拼接记录
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
//加上下面的属性，会在以后的加载所有URL的时候URL都加上‘’里面的字符
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
//css-loader只负责加载css,不负责生效css效果
//style-loader负责将样式添加到DOM中使效果生效
//webpack在use中使从右往左读
use: [ 'style-loader', 'css-loader' ]
},
如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？
我们这里以less为例，其他也是一样的。
我们还是先创建一个less文件，依然放在css文件夹中
@fontSize: 50px;
@fontColor: orange;
body {
font-size: @fontColor;
color: @fontSize;
}
继续在官方中查找，我们会找到less-loader相关的使用说明
首先，还是需要安装对应的loader
注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译
npm install --save-dev less-loader less
其次，修改对应的配置文件
添加一个rules选项，用于处理.less文件
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
首先，我们在项目中加入两张图片：
我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式
body {
/*background-color: red;*/
background: url("../img/01.png");
}
如果我们现在直接打包，也会出错
经查找，我们使用url-loader来处理，依然先安装url-loader
npm install --save-dev url-loader
修改webpack.config.js配置文件：
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将加载的图片编译成base64字符串形式
//.......,大于limit时，会用file-loader去加载这张图片
limit: 8192,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
再次打包，运行，就会发现我们的背景图片选出了出来。
那么问题来了，如果大于8kb呢？我们将background的图片改成test02.jpg
所以，我们需要安装file-loader
npm install --save-dev file-loader
再次打包，就会发现dist文件夹下多了一个图片文件
我们发现webpack自动帮助我们生成一个非常长的名字
所以，我们可以在options中添加上如下选项：
options: {
name: 'img/[name].[hash:8].[ext]'
}
output: {
//动态获取出口的绝对路径
//resolve进行路径的拼接，dirname是一个全局变量，进行路径拼接记录
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
//加上下面的属性，会在以后的加载所有URL的时候URL都加上‘’里面的字符
publicPath: 'dist/'
},
但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确
如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。
在前面我们说过，如果希望将ES6的语法转成ES5，那么就需要使用babel。
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置webpack.config.js文件
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
重新打包，查看bundle.js文件，发现其中的内容变成了ES5的语法
使用
如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。
在前面我们说过，如果希望将ES6的语法转成ES5，那么就需要使用babel。
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置webpack.config.js文件
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
重新打包，查看bundle.js文件，发现其中的内容变成了ES5的语法
本文地址：https://blog.csdn.net/weixin_45333934/article/details/107483678
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论