怎么办呢？？？？？？
1 回答
已采纳
new_object_
TA贡献55条经验 获得超117个赞
你首先得知道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.js
var add = require('./lib.js');
var result = add(1, 2);
alert(result);lib.js
function 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什么的你可以一点一点去试，需要的时候就去查看文档，把它们加上去。
注：强烈建议养成自己阅读文档的能力
添加回答
举报
0/150
提交
取消