怎么辦呢？？？？？？
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的結果。但是其中使用到了模塊的引用，目前在瀏覽器中是無法原生支持的?？梢試L試打開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什么的你可以一點一點去試，需要的時候就去查看文檔，把它們加上去。
注：強烈建議養成自己閱讀文檔的能力