您的位置：首页 > 数码常识数码常识
Webpack怎么安装（webpack使用步骤）
2025-05-11人已围观
Webpack怎么安装（webpack使用步骤）
使用Webpack有一段时间了，但是感觉之前学的用的都比较零散，所以在这里整理一下Webpack的使用知识，从入门到进阶。
webpack使用步骤
创建项目
首先创建最简单的一个项目
npm init
得到以下项目结构：
安装Webpack
先来个全局的
npm i webpack -g
再安装项目中的
npm i webpack --save-dev
此时项目结构为，且注意到package.json中自动生成了对webpack的开发依赖：
Webpack的打包初体验
现在让我们用Webpack来打包文件，那么新建一个js文件如下：
然后执行命令
webpack http://sjzlt.cn/shuma/src/app.js http://sjzlt.cn/shuma/build/bundle.js
那么就会在根目录下生成一个build文件夹，里面会有一个bundle文件
可以查看bundle.js的js文件信息，里面的作用就是用了一个立即执行函数，然后将app.js的内容封装成一个函数，作为参数传进内部执行。这样就可以来分析处理依赖什么的了。
原理就是这个样子，具体的可以自己看一下底层代码就行，对于这种只打包一个文件的bundle.js，代码也很好看懂。
每次打包都这样输入一大串命令明显很烦，所以需要用到package.json的脚本功能，很简单，修改它为：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "webpack的使用demo",
"main": "index.js",
"author": "韩子卢",
"license": "MIT",
"devDependencies": {
"webpack": "^3.10.0"
},
"scripts": {
"build": "webpack http://sjzlt.cn/shuma/src/app.js http://sjzlt.cn/shuma/build/bundle.js"
}
}
对比之前的文件内容，明白玩法就好了，然后我们如果再想打包，那么运行命令：
npm run build
也行，当然命令不一定要用build，把在package.json 里把build改为dota都行，此时运行的命令自然是：
npm run dota
这样做的好处是，简单方便，一些命令就不用记下来了，其次其他人很容易知道这个项目中如何进行打包。
Webpack命令的一些常用参数
参数 作用
-p 对打包的文件进行压缩
-d 提供source map，方便调式代码
--watch 监控源文件，如果源文件做了修改，那么立马生成新的打包文件
webpack的配置文件
一般使用webpack都不会直接用webpack命令来生成某个脚本，因为它还有些强大的功能不好在简单命令里面实现，这个时候就需要用到webpack的配置文件了。
此时在根目录下新增一个文件：
然后命令行运行：
webpack
此时webpack会自动检索根目录下的webpack.config.js文件，然后根据这个文件中的配置去打包文件。
接下来我们分析一下webpack.config.js的代码：
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
filename: 'http://sjzlt.cn/shuma/build/bundle.js'
}
};
module.exports为导出对象，webpack会直接读取这个导出对象来打包代码，所以我们将打包的配置直接赋值给这个对象。
entry代表入口，即打包的时候从哪个文件开始打包，
output代表输出配置，即打包后生成的文件配置，其中的filename代表文件名。
上面的打包配置可以简单理解为，从'http://sjzlt.cn/shuma/src/app.js'文件开始打包，生成一个文件名为bundle.js的文件，它的路径是'http://sjzlt.cn/shuma/build/bundle.js'。
这里我们也可以这么写：
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
}
};
注意，这里的path代表文件的输出目录，当我们用了path之后，filename就直接写文件名，而不要再写路径了，因为新的路径是path来的，如果还按照原来的，会在build文件夹下再生成一个build文件夹。
此时看到配置中还出现了一个__dirname变量，这个变量我们也没赋值，放的是什么呢?
__dirname实际上是webpack在编译时自己内部加上的一个变量，它代表webpack.config.js这个文件在电脑中的绝对路径。
想到这么玩的好处了吗，比如利用在filename中加相对路径可以直接生成文件到电脑中的发布网站下面。
webpack的插件
webpack的功能强大有一部分的原因就是插件的功能多且强。
然而我们在使用插件前需要明白一点，我们使用的目的是为了解决问题，而不是为了使用而使用。
现在我们项目的问题是什么？
首先没有html，这个简单，直接新建一个html即可，不需要插件。
但是如果这样玩的话，每次生成的js文件名都是bundle.js，那么网站就会形成缓存，导致明明发布了也没有效果啊。
解决这个问题的办法是在js后面加版本号，比如bundle.v1_1_0.js，我们可以手工操作进行修改，但是总有忘记的时候，这样就会出错。
那么问题就这么产生了，解决这个问题的插件就是：html-webpack-plugin。
接下来让我们来开始使用这个插件。
首先webpack内部没有集成这个插件，需要我们去安装：
npm i html-webpack-plugin --save-dev
然后删掉index，并修改webpack.config.js为：
var HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
此时运行
webpack
可以发现在我们的输出目录build下还生成了一个index,里面还自动引入了我们生成的的bundle.js。
可是这样并没有解决我们的问题，那么让我们来使用html-webpack-plugin的更多功能，修改webpack.config.js文件为：
var HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Demo",
filename: 'demo',
minify: {
collapseWhitespace: true,
},
hash: true
})
]
};
生成后发现在输出目录生成的html文件名变味了demo，html的标题成了Webpack Demo，引用的js有了hash值，并且html还被压缩了，去掉了里面所有可折叠的空白元素。
这样就行了吗？
不够的，实际的开发过程中我们遇到html结构没有这么简单，会需要更多的html结构。
就比如我想在生成的html中引入一个bootstrap的css。
这又是一个新的问题，然而html-webpack-plugin的模板功能可以解决这个问题。
新建一个模板html文件template，
修改webpack.config.js为：
这样就会以index文件为模板生成最后的html文件，当然html-webpack-plugin还有更多的功能，这里就不细说了!
上面就是小居数码小编今天给大家介绍的关于（webpack使用步骤）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
修改pdf中的文本的字体教程步骤（怎样修改pdf中的文本的字体）
教你操作步骤（智能电视怎么装第三方软件）
word绘制流程图步骤操作（word绘制流程图）
修改pdf里面的文字内容步骤演示（如何修改pdf的文字）
156528
使用Webpack有一段时间了，但是感觉之前学的用的都比较零散，所以在这里整理一下Webpack的使用知识，从入门到进阶。
webpack使用步骤
创建项目
首先创建最简单的一个项目
npm init
得到以下项目结构：
安装Webpack
先来个全局的
npm i webpack -g
再安装项目中的
npm i webpack --save-dev
此时项目结构为，且注意到package.json中自动生成了对webpack的开发依赖：
Webpack的打包初体验
现在让我们用Webpack来打包文件，那么新建一个js文件如下：
然后执行命令
webpack http://sjzlt.cn/shuma/src/app.js http://sjzlt.cn/shuma/build/bundle.js
那么就会在根目录下生成一个build文件夹，里面会有一个bundle文件
可以查看bundle.js的js文件信息，里面的作用就是用了一个立即执行函数，然后将app.js的内容封装成一个函数，作为参数传进内部执行。这样就可以来分析处理依赖什么的了。
原理就是这个样子，具体的可以自己看一下底层代码就行，对于这种只打包一个文件的bundle.js，代码也很好看懂。
每次打包都这样输入一大串命令明显很烦，所以需要用到package.json的脚本功能，很简单，修改它为：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "webpack的使用demo",
"main": "index.js",
"author": "韩子卢",
"license": "MIT",
"devDependencies": {
"webpack": "^3.10.0"
},
"scripts": {
"build": "webpack http://sjzlt.cn/shuma/src/app.js http://sjzlt.cn/shuma/build/bundle.js"
}
}
对比之前的文件内容，明白玩法就好了，然后我们如果再想打包，那么运行命令：
npm run build
也行，当然命令不一定要用build，把在package.json 里把build改为dota都行，此时运行的命令自然是：
npm run dota
这样做的好处是，简单方便，一些命令就不用记下来了，其次其他人很容易知道这个项目中如何进行打包。
Webpack命令的一些常用参数
参数 作用
-p 对打包的文件进行压缩
-d 提供source map，方便调式代码
--watch 监控源文件，如果源文件做了修改，那么立马生成新的打包文件
webpack的配置文件
一般使用webpack都不会直接用webpack命令来生成某个脚本，因为它还有些强大的功能不好在简单命令里面实现，这个时候就需要用到webpack的配置文件了。
此时在根目录下新增一个文件：
然后命令行运行：
webpack
此时webpack会自动检索根目录下的webpack.config.js文件，然后根据这个文件中的配置去打包文件。
接下来我们分析一下webpack.config.js的代码：
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
filename: 'http://sjzlt.cn/shuma/build/bundle.js'
}
};
module.exports为导出对象，webpack会直接读取这个导出对象来打包代码，所以我们将打包的配置直接赋值给这个对象。
entry代表入口，即打包的时候从哪个文件开始打包，
output代表输出配置，即打包后生成的文件配置，其中的filename代表文件名。
上面的打包配置可以简单理解为，从'http://sjzlt.cn/shuma/src/app.js'文件开始打包，生成一个文件名为bundle.js的文件，它的路径是'http://sjzlt.cn/shuma/build/bundle.js'。
这里我们也可以这么写：
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
}
};
注意，这里的path代表文件的输出目录，当我们用了path之后，filename就直接写文件名，而不要再写路径了，因为新的路径是path来的，如果还按照原来的，会在build文件夹下再生成一个build文件夹。
此时看到配置中还出现了一个__dirname变量，这个变量我们也没赋值，放的是什么呢?
__dirname实际上是webpack在编译时自己内部加上的一个变量，它代表webpack.config.js这个文件在电脑中的绝对路径。
想到这么玩的好处了吗，比如利用在filename中加相对路径可以直接生成文件到电脑中的发布网站下面。
webpack的插件
webpack的功能强大有一部分的原因就是插件的功能多且强。
然而我们在使用插件前需要明白一点，我们使用的目的是为了解决问题，而不是为了使用而使用。
现在我们项目的问题是什么？
首先没有html，这个简单，直接新建一个html即可，不需要插件。
但是如果这样玩的话，每次生成的js文件名都是bundle.js，那么网站就会形成缓存，导致明明发布了也没有效果啊。
解决这个问题的办法是在js后面加版本号，比如bundle.v1_1_0.js，我们可以手工操作进行修改，但是总有忘记的时候，这样就会出错。
那么问题就这么产生了，解决这个问题的插件就是：html-webpack-plugin。
接下来让我们来开始使用这个插件。
首先webpack内部没有集成这个插件，需要我们去安装：
npm i html-webpack-plugin --save-dev
然后删掉index，并修改webpack.config.js为：
var HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
此时运行
webpack
可以发现在我们的输出目录build下还生成了一个index,里面还自动引入了我们生成的的bundle.js。
可是这样并没有解决我们的问题，那么让我们来使用html-webpack-plugin的更多功能，修改webpack.config.js文件为：
var HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry: 'http://sjzlt.cn/shuma/src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Demo",
filename: 'demo',
minify: {
collapseWhitespace: true,
},
hash: true
})
]
};
生成后发现在输出目录生成的html文件名变味了demo，html的标题成了Webpack Demo，引用的js有了hash值，并且html还被压缩了，去掉了里面所有可折叠的空白元素。
这样就行了吗？
不够的，实际的开发过程中我们遇到html结构没有这么简单，会需要更多的html结构。
就比如我想在生成的html中引入一个bootstrap的css。
这又是一个新的问题，然而html-webpack-plugin的模板功能可以解决这个问题。
新建一个模板html文件template，
修改webpack.config.js为：
这样就会以index文件为模板生成最后的html文件，当然html-webpack-plugin还有更多的功能，这里就不细说了!
上面就是小居数码小编今天给大家介绍的关于（webpack使用步骤）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
修改pdf中的文本的字体教程步骤（怎样修改pdf中的文本的字体）
教你操作步骤（智能电视怎么装第三方软件）
word绘制流程图步骤操作（word绘制流程图）
修改pdf里面的文字内容步骤演示（如何修改pdf的文字）
156528
很赞哦！ ()
下一篇：返回列表