超详细！webpack入门教程(一)
原创
本文作为webpack小白入门文章，会详细地介绍webpack的用途、具体的安装步骤、注意事项、一些基本的配置项，并且会以一个具体的项目实例来介绍如何使用webpack。另外，本文会简单地介绍一些最新的webpack4在安装、使用中需要注意的要点。
1.webpack是什么，用来做什么
webpack是一个前端构建工具。那么什么是构建工具呢？
前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。一般需要构建工具处理的几种情况：
- 代码压缩
将JS、CSS代码混淆压缩，让代码体积更小，加载更快
- 编译语法
编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。
- 处理模块化：
CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。
其他的构建工具：最早普及使用的是Grunt，后面又出现Gulp。Webpack是目前流行的构建工具，可以说是构建工具的神器，学习成本较高。
2.安装webpack
-- 第一步，安装Node.js:
安装webpack前，你需要先安装Node.js，可以去Node.js官网下载，安装完成后，运行命令来查看是否安装成功：
node -v需要注意的是webpack4官方不再支持node4以下的版本，依赖的node环境版本>=6.11.5，当然考虑到最佳的ES6特性实现，建议node版本可以升级到V8.9.4或以上版本，具体更新说明部分可以见：webpack4更新日志
下面就全局安装webpack，运行：
npm install -g webpack--第二步，创建配置项：
安装完Node.js后，新建一个项目目录，进入目录后，执行：
npm init按提示输入项目的名称、版本、描述、作者等信息，如果你不准备在npm中发布你的模块，这些答案都不重要，一路回车默认也可。之后就会在该目录下出现一个package.json文件，打开可以看到刚才输入的信息：
{
"name": "example",
"version": "1.0.0",
"description": "for introduction",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lynnshen",
"license": "ISC"
}--第三步，安装webpack:
需要把它安装到devDependencies,运行：
npm install --save-dev webpack可以看到package.json中，devDependencies中有了webpack，版本号是4.17.1:
{
"name": "example",
"version": "1.0.0",
"description": "for introduction",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lynnshen",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1"
}
}npm安装注意两点：
(1)安装时如未指定版本号，则按最新的版本安装，这里webpack安装的是最新的4.17.1的版本
(2)npm install --save和npm install --save-dev的区别：
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下。dependencies是发布后还依赖的，devDependencies是开发时的依赖。
--第四步，安装webpack-cli:
注意：如果安装的是webpack v4+版本，则还需要安装webpack-cli或者webpack-command，否则webpack命令运行不了。执行：
npm uninstall webpack-cli //卸载本地安装的webpack-cli
npm install -g webpack-cli//全局安装webpack-cli
npm install --save-dev webpack-cli //把webpack-cli安装到devDependencies这里我安装的是webpack-cli
先全局安装，再--save-dev安装后，可以看到package.json中增加webpack-cli：
{
"name": "example",
"version": "1.0.0",
"description": "for introduction",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lynnshen",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}3.项目实例
在该目录下创建src文件夹，其中一个是入口文件app.js，一个是真正写页面的work.js。入口文件用来引入真正写页面的JS文件、CSS文件。
work.js内容：
document.write('欢迎阅读webpack入门教程')app.js内容：
var dt = require('./work.js')然后，再返回上一层目录，新建index.html文件（该文件和src属于同一层级），内容是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>test</div>
<script src='./dist/main.js'></script>
</body>
</html>总结一下，目前项目的文件目录是：
在命令行中执行：
webpack 项目入口文件的地址这里是执行：
webpack src/app.js 如果发现报错：
Cannot find module ‘webpack’这是因为没有安装webpack-cli或者webpack-command，请回到安装的第四步进行安装。
如果看到这个，恭喜你打包成功：
打包成功后，就会在项目目录下多出一个dist文件夹，里面有个main.js，index.html中<script>，引入的就是这个打包后的webpack文件地址。然后用浏览器打开index.html，可以看到：
这就是webpack的一个简单用法。
但是如果这样使用，每次编译都要输入webpack的入口文件路径，非常麻烦。可以通过编写webpack，来进行简化：
编写 webpack 配置文件
--新建webpack.config.js，内容是：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:{
app:__dirname+'/src/app.js',//唯一入口文件,__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
},
output:{
path: path.resolve(__dirname, './dist'),//打包后的文件存放的地方
filename:'bundle.js' //打包后输出文件的文件名
}
};注意，这里把打包后输出的文件名命名为bundle.js，所以在index.html中需要修改引入的js文件名，index.html的内容是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>test</div>
<script src='./dist/bundle.js'></script>
</body>
</html>把原来打包后的dist/main.js删掉，命令行执行：
webpack可以看到打包成功，在项目的dist文件中出现bundle.js：
浏览器打开index.html，发现正常显示：
注意，命令行直接执行webpack，前提是全局安装了webpack，如果不是全局安装，还需要在后面加上入口文件的路径。
如果不是全局安装webpack，也不想在后面加上入口文件的路径，因为这种写法比较麻烦，那怎么办呢？
可以在package.json中设置start关键字。start是Node.js的变量，相当于js的var，是一个关键字：
{
"name": "example",
"version": "1.0.0",
"description": "for introduction",
"main": "index.js",
"scripts": {
"start": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lynnshen",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}然后测试下：删除dist下打包后的文件bundle.js，命令行执行：
npm start可以看到打包成功，在项目的dist文件中出现bundle.js：
浏览器打开index.html，发现正常显示。
如果不用“start”,而是其他的名字，如“dev”:
{
"name": "example",
"version": "1.0.0",
"description": "for introduction",
"main": "index.js",
"scripts": {
"dev": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lynnshen",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}则在命令行要执行：
npm run dev注意写法，执行npm dev是不可以的。
在Webpack4.0中，通过mode指定环境。用于配置运行环境，mode的值可以为development，表示的是开发模式，或者是production，表示的是生产模式。webpack 会将 production 作为 mode 的默认值去设置。这里在package.json中修改：
{
"name": "example",
"version": "1.0.0",
"description": "for introduction",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build":"webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lynnshen",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
命令行执行：
npm run dev打包出来的bundle.js格式则是这样的，大小是4.25KB：
命令行执行：
npm run build打包出来的bundle.js格式是这样的，大小是1001B：
可以看出生产模式相对运行模式，会更多地压缩代码体积大小。
至此，本文从安装到使用，详细地介绍了webpack的使用方法，如有问题，欢迎指正。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。