webpack4.0入门学习总结（一）
未经作者允许请勿转载
更好的阅读体验查看我的博客：Alan
这一篇文章主要简单介绍了webpack是什么以及webpack的一些简单配置，你只要跟着我敲完这些代码后一定会对webpack有一个基本的了解的。????
webpack是一个模块打包器
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
上面引用了webpack官网的一段介绍，我们可以简单的理解webpack是一个模块打包器，那什么是模块打包器呢？????先看一个简单的例子
{% tabs 1 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
// ES Moudule 模块化引入
import ComponentB from './componentB';
var root = document.getElementById('root');
// CommonJs 模块引入
var ComponentA = require('./componentA');
new ComponentA();
new ComponentB();
function ComponentA() {
var componentA = document.createElement('div');
componentA.innerHTML = 'ComponentA';
root.append(componentA);
}
module.exports = ComponentA;
function ComponentB() {
var componentB = document.createElement('div');
componentB.innerHTML = 'ComponentB';
root.append(componentB);
}
export default ComponentB;
{% endtabs %}
这里的模块可以理解成componentA和componentB，这种写法在vue和react中非常常见，写完这些文件后打开index.html文件，浏览器是会报错的。
{% note error, Uncaught SyntaxError: Cannot use import statement outside a module %}
这是由于这里使用了es6中的模板引入的方式，浏览器是识别不了这种方式的，那怎么办呢？????
这个时候webpack就派上用场了，首先初始化该项目
npm init -y
初始化后会生成package.json文件
安装webpack-cli和webpack（不建议全局安装）
npm install webpack-cli -D
npm install webpack -S
安装固定版本的webpack
npm install [email protected]版本号
npm info webpack // 查看包信息
打包index.js
npx webpack index.js
{% note idea green, 这里如果不使用npx的话node会默认在全局环境中找寻webpack，加上npx的话就会使用项目中安装的webpack来执行命令 %}
打包后可以看到根目录下多了一个dist文件夹（webpack默认设置好的，后面会讲如何改变），里面有一个main.js文件，这个文件就是经过webpack处理后的index.js。
然后我们修改一下index.html的代码
<script src="./dist/main.js"></script>
这下浏览器就能正常识别html中的js文件了，到这里为止理解webpack是一个模块打包器应该不是很难了吧。webpack将模块componentA和componentB打包生成了最后的main.js。
webpack配置文件
webpack的配置文件名默认是webpack.config.js，当然我们也可以指定配置文件。
开始之前我们先修改一下项目目录
webpacktest
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── componentA.js
│ ├── componentB.js
│ └── index.js
└── webpack.config.js
在项目根目录下新建配置文件webpack.config.js：
const path = require('path');
module.exports = {
mode: 'development', // 默认为production
entry: {
main: './src/index.js' // 打包入口文件
},
output: { // 输出文件配置
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
上面引用的path是node中的一个模块，__dirname表示webpack.config.js所在的目录。
entry可以简写为entry: ‘./src/index.js’
{% note info, mode中的development和production有什么区别呢 %}
我们看一下打包出来的文件bundle.js就知道了，production模式下的代码是一整行的，体积更小。而development模式下的代码不是一整行的有利于调试。
{% note link, node path的 更多 %}
执行下面命令后即可完成打包，效果和上一节一样
npx webpack
当然也可以使用自定义配置文件
npx webpack --config 自定义配置文件
写过项目的小伙伴应该都发现平时都是使用npm run xxx来打包项目的，下面就来介绍一下如何配置
修改package.json文件中的script
"scripts": {
"build": "webpack"
},
这样就可以通过npm run build来进行打包了，不过看过第一节的小伙伴肯定有疑问了，这样配置会不会使用全局的webpack去进行打包呢????，其实并不会，这里npm script命令会在项目的node_modules文件中去寻找webpack并执行。
打包好后我们打开index.html看看，发现是会报错的，这里注意：我们要手动把index.html移动到dist目录下并修改一下js路径，因为webpack并没有将index.html打包到dist目录下。
<script src="./bundle.js"></script>
这下再运行index.html就没有任何问题了。????
上一篇： php面向对象程序设计入门教程