如何学习webpack 文档，目前阶段表示看不懂！！

你首先得知道webpack是干什么的？长话短说，webpack是个自动化构建工具，可以用来对js进行分析，对项目进行自动化构建和打包。那你需要使用webpack来干什么呢？使用webpack最原始的目的就是对js进行编译，编译模块引用、vue、react、es6等语法，将这些浏览器无法识别的东西组织成浏览器能够读懂的形式。那你需要怎样使用webpack达到这一目的呢？不妨写一个最简单的js文件编译，先创建三个文件，代码如下：index.html<!DOCTYPE html> <html> <head> <title>compile test</title> </head> <body> <script type="text/javascript" src="index.js"></script> </body> </html>index.jsvar add = require('./lib.js'); var result = add(1, 2); alert(result);lib.jsfunction add(a, b) { return a + b; } export default add;代码很简单，写了一个加法函数，通过调用加法函数的调用输出1+2的结果。但是其中使用到了模块的引用，目前在浏览器中是无法原生支持的。可以尝试打开index页面，无任何反应，打开控制台，应该会看到“require is not defined”的报错信息。那么现在就轮到webpack出场了。webpack的安装这里就不赘述了，直接上配置代码：require('webpack'); module.exports = { entry: __dirname + '/app.js', output: { path: __dirname, filename: 'main.js', }, }其中 __dirname是node中的一个全局变量，用来表示当前的文件夹绝对路径。（有兴趣可以在控制台将其输出一下）。这里是最简单的webpack编译，用到了两个api，一个entry，入口，即告知webpack编译哪些文件，另外一个是output，告知webpack，编译后的文件放哪里去，叫什么名字。配置完成，控制台输入命令，进行编译。webpack编译完成，会看到文件夹下多出一个main.js的文件，这就是编译后的文件。修改index.html，引用编译后的main.js，然后打开页面你就能看到结果为3的弹窗，这就是webpack最简单的使用。知道了如何怎样开始使用webpack，后续的只是在这之上进行扩展，给它加上一些额外的功能。如：resolve: { alias:[ { 'vue': 'vue/dist/vue.esm.js', }, ], }给文件取一个别名，使webpack在编译过程中遇到的vue模块自动使用'vue/dist/vue.exm.js'来替换。即我在项目中此两句等价：import Vue from 'vue'; import Vue from 'vue/dist/vue.esm.js';再如，我们需要对ES6文件进行编译，将ES6中的箭头函数、class等转译成浏览器能够识别的ES5语法：module: { loaders: [ { test: /\.js$/, loader: 'js-loader', }, ], }另外还有plugins、webpack server什么的你可以一点一点去试，需要的时候就去查看文档，把它们加上去。注：强烈建议养成自己阅读文档的能力

如何学习webpack 文档，目前阶段表示看不懂！！

1回答