001、什么是webpack? 作用有哪些？
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
作用：
1、模塊化，讓我們可以把復雜的程序細化為小的文件;
2、類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之后還能轉換為JavaScript文件使瀏覽器可 以識別；
3、Scss，less等CSS預處理器
002、webpack與gulp、Grunt的區別
ebpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。
003、webpack的打包流程
webpack是建立在module之上進行打包的
css js img 都叫做module模塊
004、webpack官方配置文件
005、webpack的基本使用
1、全局安裝webpack npm install webpack -g
2、查看版本號 : webpack -v
3、查看全局安裝過哪些模塊：npm list -g --depth 0
4、局部安裝webpack : npm install webpack --save-dev
5、基礎的打包方式 webpack 文件名 生成文件名
溫馨提示：webpack4.0以上版本坑比較多，新手建議安裝4.0以下版本
1、卸載默認： npm uninstall webpack
2、全局安裝： npm install webpack@3.5.3 -g
3、局部安裝： npm install webpack@3.5.3 --save-dev
006、預熱一:打包文件
1、npm init -y 生成一個node包
2、局部安裝webpack 前提全局已經安裝完畢
3、建立webpack.config.js
4、配置webpack.config文件
output:{
//占位符 滿足線上地址的需求
publicPath:'html://cdn.com/'
}
007、html-webpack-plugin
1、安裝：npm install html-webpack-plugin
2、引入模塊： const htmlWebpackPlugin = require("html-webpack-plugin");
3、在module.exports中的plugins中配置文件
plugins:[
new htmlWebpackPlugin()
]
4、new htmlWebpackPlugin中有很多屬性 詳情請參考官方文檔
new htmlwebpackPlugin({
title:"如果能夠安定，有誰又願意顛沛流離",
//模板文件
template:'index.html',
//生成的文件名稱
filename:"html-[hash].html",
data:new Date(),
minify:{
//刪除注釋
removeComments:true,
//刪除空格
collapseWhitespace:true
}
})
擴展：如需在模板中調用htmlWebpackPlugin中的參數 可用以下方法 <%= htmlWebpackPlugin.options.屬性名 %>
008、html-webpack-plugin 高級應用
如需要生成多個html,並且引入不同的js模塊。我們可以多次調用 new htmlWebpackPlugin()
009、babel
babel是一個編譯javascript的平台，它可以編譯代碼幫你達到以下目的
1、讓你使用最近的javascript代碼(ES6 ES7) 而不用管新的標准瀏覽器是否支持
2、讓你使用基於javascript進行擴展語言 例如react的jsx
babel的安裝與配置
babel其實是幾個模塊化的包，其核心功能位於稱為babel-core的npm包中 webpack可以把不同的包整合在一起使用，對於每一個你需要的功能或擴展，你都需要安裝單獨的包
1、首先安裝這些包 npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
2、處理css的loader
npm install --save-dev style-loader css-loader sass-loader node-sass
2、babel的基本配置 詳情請參考官網
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:["@babel/env","@babel/react"]
}
},
exclude:__dirname+'node_modules'
}
]
}
include和exclude需要相對路徑，所以include:__dirname +'./src/' 加前綴__dirname
010、webpack配置跨域
devServer:{ proxy:{ '/api': { target: 'http://www.baidu.com', //目標服務器地址 pathRewrite: { '^/api': '' },// 將/api開頭的請求地址, /api 改為 /, 即 /api/xx 改為 /xx changeOrigin: true// 是否修改來源, 為true時會讓目標服務器以為是webpack-dev-server發出的請求! }, '/getData':{ target:'http://jd.com', pathRewrite:{'^/getData':''}, changeOrigin:true, } } }
011、module.exports 、exports的區別
module.exports和exports的區別就是var a={}; var b=a; 中a和b的區別。exports指向的只是一個引用
require返回的只是module.exports
nodejs不支持import 和 export
module.exports：是node中內置的一個導出模塊的方法
012、webpack-dev-server
1、執行命令 webpack --watch 文件監聽
2、也可以在package中的scripts中修改命令 build:"webpack --watch";
3、當執行命令 當文件發生變化的時候服務器會自動幫我們重啟命令
除此之外還有更好用的webpack-dev-server
1、全局安裝 npm install webpack-dev-server@2 -g
2、在package.json里面修改scripts build1:"webpack-dev-server";
3、運行 npm run build1
4、如果在4.0.1中安裝失敗 需要安裝 npm install webpack-cli -D
擴展：
webpack-dev-server：不會生成線上目錄 例如我們上面說過的build 而是放在內存中
webpack：打包上線