Webpack基礎總結
一、安裝和配置webpack
1、全局安裝webpack
這樣就安裝好了webpack，可以再全局通過webpack -v來查看是否安裝成功。
2、先創建項目目錄結構，根目錄是mywebpack。進入項目根目錄，執行：npm init，生成package.json文件，內容就是一堆json數據，基本就是在終端裏輸入的信息。
3、進入項目根目錄局部安裝webpack，進入./mywebpack，執行：npm install webpack --save-dev，局部安裝webpack成功了，根目錄下會出現一個node_modules文件夾。
以後我們在根目錄下通過npm安裝的各種依賴包都會默認安裝到這個文件夾下面。
然後，webpack -v可以查看webpack版本；或進入node交互環境，require("webpack")，看能不能獲取到webpack
現在我們項目的webpack框架就準備好了，接下來我們要使用它來處理各種東西了。
4、進入根目錄，建兩個文件夾，分別為src和dist
（1）src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解為用JavaScript編寫的模塊。
（2）dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。
在dist下建立一個index.html文件，寫入以下代碼
<!DOCTYPE html>
<html lang="
這裏引入的bundle.js 可以先不管，這個文件現在還沒有，這是用webpack打包後生成的文件
src下建一個index.js文件，寫入代碼：
document.write("It works.");
5、在根目錄新建一個webpack.config.js文件，然後開始配置：
const path = require(‘path‘);
module.exports={
//入口文件的配置項
entry:{
entry:‘./src/index.js‘
},
//出口文件的配置項
output:{
//輸出的路徑，用了Node語法
path:path.resolve(__dirname,‘dist‘),
//輸出的文件名稱
filename:‘bundle.js‘
},
mode:"development",//註意最新版本必須加mode，否則會報錯
//模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//插件，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
6、然後在終端輸入：webpack，進行打包，之後我們就可以在disc目錄下看到打包生產的bundle.js文件，並能成功運行index.html文件。
註意：上面的mode項在最新版本是必須得加的，否則會給你報下面這個錯誤
二、多入口、多出口配置
const path = require(‘path‘);
module.exports={
//入口文件的配置項
entry:{
entry:‘./src/index.js‘,
entry2:‘./src/Greeter.js‘
},
//出口文件的配置項
output:{
//輸出的路徑，用了Node語法
path:path.resolve(__dirname,‘dist‘),
//輸出的文件名稱
filename:‘[name].js‘
},
mode:"development",
//模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//插件，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
在入口文件中，新增了一個entry.js的入口文件，這個文件需要手動建立，出口文件的filename，我們把原來的bundle.js修改成了[name].js
[name]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就可以打包出幾個文件。
在終端輸入 webpack 進行打包
Webpack基礎總結