在慕課上學習了webpack的課程，做了一些筆記，算分享也算記錄吧。教程里的是webpack1和現在的webpack4有很多區別，自己也走了不少的坑，最好使用的時候去看官方文檔。
https://webpack.js.org/
在填坑的時候也借鑒了很多人寫的文章。所以有很多部分是融合了超級多前人的經驗總結，然后自己結合實際進行操作的做筆記。部分地方可能有重復，看得懂就好了。
1.全局安裝webpack npm install -g webpack
2.創建項目文件，初始化項目文件目錄 npm init
到項目文件下安裝webpack npm install webpack
3.安裝全局的webpack-cli npm install -g webpack-cli //獲取當前webpack版本號配置文件
4.配置mode
默認有production和development兩種模式可以設置
命令行設置 webpack --mode development
5.新建入口 在項目文件目錄下新建src文件夾，新建index.js文件入口
6.文件打包 命令行輸入 webpack --mode development 或 webpack --mode production
webpack將會默認打包，將./src/index.js文件打包成./dist/main.js文件（自動生成dist文件夾和main.js文件）
7.建立html文件，在項目目錄下建立html文件，可以直接引用dist/main.js文件。
注意，我們的 script 引用的文件是 dist/main.js，而不是 index.js。這正是前端開發領域的一個趨勢：開發的源文件（例子中的 index.js）與最終部署的文件（例子中的 dist/main.js）是區分開的，之所以這樣，是因為開發環境與用戶的使用環境並不一致。比如我們可以在開發環境使用 ES2017 甚至 ES2018 的特性，而用戶的瀏覽器不見得支持 - 這也是 webpack 等打包工具的一個意義，它們能夠輔助我們構建出在目標用戶瀏覽器上正常運行的代碼。
8.其他參數配置
我們如果需要配置webpack指令的其他參數，只需要在webpack –mode production/development后加上其他參數即可，如：
webpack --mode development --watch --progress --display-modules --colors --display-reasons
實時刷新
9.監控文件
watch選項最為直觀，但在默認情況下，watch選項是關閉狀態。
啟用watch選項 webpack --mode development --watch
10.刷新瀏覽器（看官方文檔容易填坑，奈何英語emmmm）
https://github.com/webpack/webpack-dev-server
https://webpack.js.org/configuration/dev-server/#devserver
webpack-dev-server,一個基於expressjs的開發服務器，提供實時刷新瀏覽器頁面的功能。
安裝webpack-dev-server
首先在項目下安裝 webpack-dev-server: npm install -g webpack-dev-server
然后在命令行下執行webpack-dev-server --mode development --output-public-path dist
webpack-dev-server是一個輕量級的服務器，修改文件源碼后，自動刷新頁面將修改同步到頁面上安裝webpack-dev-server：①全局安裝：npm install webpack-dev-server -g
②在項目中安裝並將依賴寫在package.json文件中:npm install webpack-dev-server --save-dev
③使用命令webpack-dev-server --mode development --output-public-path src完成自動刷新，指定publicPath，這部分很容易沒有實時刷新。
④默認的端口號是8080，如果需要8080端口被占用，就需要改端口，webpack-dev-server --port 3000(將端口號改為3000)，可以直接在webpack.config.js配置文件中配置devServer屬性，開啟熱更新和port。
⑤啟動服務，輸入localhost:端口號，就顯示發布的所有根目錄，如果項目根目錄中沒有index.html文件，就會在瀏覽器中列出項目根目錄中的所有的文件夾。
⑥當使用webpack-dev-server --mode development --output-public-path src命令時，在每次修改文件，是將文件打包保存在內存中並沒有寫在磁盤里，這種打包得到的文件和項目根目錄中的index.html位於同一級。使用webpack命令將打包后的文件保存在磁盤中例如在index.html文件中引入通過webpack-dev-server --mode development --output-public-path src打包的build.js
<script src="build.js"></script> 在index.html文件中引入通過webpack命令打包的build.js
<script src="./build/build.js"></script>
--inline 內聯模式，在開發服務器的兩種不同模式之間切換。默認情況下, 應用程序將被啟用
內嵌模式。這意味着將在包中插入一個腳本來處理實時重裝, 並且生成消息將出現在瀏覽器控制台中。
--hot 啟用熱模塊更換功能
//////以上是搜索了各個教程里面說的，但是實際操作還是有問題，
index.html入口文件是在根目錄下，沒有進行配置content-base，因為配置了之后會只打包配置的目錄文件，默認是根文件。配置了output的publicPath（很重要，刪掉之后就不能自動刷新了，應該是webpack-dev-server將每次打包的文件根據output設置生成在publicPath目錄下，而文件本身依舊是手動打包的，無法查看到自動刷新打包的文件），只配置了端口，沒有配置hot:true和inline:true(最開始配置了，但是有報錯，所以刪掉莫名OK了）
⑦webpack自帶的watch命令與webpack-dev-server的區別
--watch是文件修改后自動打包，webpack-dev-server是修改后發布到服務器上
⑧webpack-dev-server --mode development --content-base src --inline --hot//顯示只針對src路徑下的文件刷新,文件修改之后瀏覽器自動刷新，如果要打開的文件和打包的文件不在一個文件夾內，最好不要設定文件夾
11.打包css文件
在項目目錄下安裝處理css文件的loader
命令行輸入：npm install css-loader style-loader --save-dev
css-loader //處理css文件
style-loader //將css-loader處理后的文件作為樣式標簽<style>插入到html文件中
style-loader //將css-loader處理后的文件作為樣式標簽<style>插入到html文件中
在處理css文件的時候要指定loader，如在index.js文件里輸入require('style-loader!css-loader!./style.css')
或者直接在命令行輸入webpack --mode development --module-bind "css=style-loader!css-loader"
12--progress(查看進度)
13--display-modules(顯示隱藏的模塊)
14 --display-reasons(顯示打包原因)
15.配置，webpack需要傳入配置對象，因此進行新建配置文件webpack.config.js，或者使用node.js內置的path模塊進行配置，並在它前面加上 __dirname這個全局變量。可以防止不同操作系統之間的文件路徑問題，並且可以使相對路徑按照預期工作。
①先寫moudule.exports={};進行配置；
②入口文件配置，entry="入口文件路徑，如./src/js/main.js";
③輸出文件配置，output={path:__dirname+"輸出文件路徑，如/dist/js/bundle.js"};//要創建dist文件夾
__dirname為運行時的當前路徑；
另一種方式，先定義const path = require("path");//引入nodejs的path模塊
然后在輸出文件路徑path:path.resolve(__dirname,"./dist/js/bundle.js");
//path.resolve()方法解析了當前路徑，將相對路徑改為絕對路徑。
④重新指定配置文件名
webpack --config 文件名
如webpack --config webpack.dev.config.js
16.定義執行腳本，可以在package.json中設置
在script中設置，如設置"webpack":"webpack --mode development --config webpack.config.js --progress --display-modules --colors --display-reason",//--colors(彩色顯示)
直接執行上面的腳本npm run webpack
17.entry配置（chunk），
①字符串表示，單輸入，所有依賴都要在入口文件中指定，如entry:"./src/js/main.js",
②數組表示，多輸入，兩個需要打包到一起的文件可以在配置文件的entry中用數組表示，如entry:["./app/entry1", "./app/entry2"],//這兩個文件將會打包到一起
③對象表示（哈希），多頁面入口，entry:{page1:"./page1",page2:["./src/a.js","./src/b.js"]},
這三種方式都會把文件打包到輸出文件中。
18.output配置，
①單個入口起點，就設置一個出口，如output:{filename:'bundle.js',path:'/dist/js'}
②多個入口起點，可以設置name或者hash，如output:{filename:'[name].js',path:__dirname+'/dist/js'}
或output:{filename:'[name]-[hash].js',path:__dirname+'/dist/js'}
或output:{filename:'[name]-[chunkhash].js',path:__dirname+'/dist/js'}
hash值可以認為是版本號或者MD5值保證每個文件的唯一性，每一次修改之后生成文件的hash值不一樣，文件名不一樣。
③publicPath可以理解為占位符。當需要上線的時候可以將服務器地址設置到這個參數中，output:{path:'xxx',filename:'xxx',publicPath:'http://cdn.com/'}
插件（plugin）
插件是 webpack 的支柱功能。webpack 自身也是構建在 webpack 配置中用到的相同的插件系統之上。插件目的在於解決 loader 無法實現的其他事。
19.插件html-webpack-plugin
要引用之前先安裝,在項目文件目錄下安裝 npm install html-webpack-plugin --save-dev
安裝好之后，在webpack.config.js配置文件中對插件的引用
var htmlWebpackPlugin = require('html-webpack-plugin');//commonJS寫法
在module.exports中添加plugin部分進行插件初始化，
插件列表，當多個bundle需要共享一些相同的插件時，CommonChunkPlugin可以將這些依賴項提取到一個共享包中，以免重復。
plugins:[
new webpack.optimize.CommonsChunkPlugin({
.....
}),
new htmlChunkPlugin({
template:'index.html',//自定義模板
filename:'index-[hash].html',//生成文件名
inject:'head',//指定鏈接注入在<head>標簽中還是<body>標簽中，為false值時表示不自動注入文件中，需要手動設置
title:'webpack demo',//傳遞參數，可以在index.html模板中引用
minify:{//壓縮html文件，具體參數設置可以查看官方文檔
}
})
]
index.html引用配置文件中的參數，JS語法模式，要使用JS語句可以使用<%%>將每行代碼包裹起來。賦值可以使用<%=xxx %>，如<%=htmlWebpackPlugin.options.title%>就可以取到配置文件中定義的title的值。
在配置文件中可以任意的配置參數向html文件進行傳參。
自定義引用的js文件可以直接寫到html文件中
如在html文件中相對應的位置寫，<script src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>
<script src="<%=htmlWebpackPlugin.chunks.a.entry%>"></script>
chunk是文件入口
以上是單文件引用的示例，多文件引用則需要調用多次的html-webpack-plugin插件，設置方式相同
多頁面使用同一個頁面模板，可以定義htmlWebpackPlugin插件中的chunks參數，進行設置不同的頁面引用不同的chunks，如設置chunks:['main','a']
excludeChunks:['a'],//指出排除的chunk
直接將公共初始化腳本嵌入到html頁面中，inline方式，在html模板中加上腳本源碼引用代碼，
如<script type="text/javascript">
<%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>
</script>
//.substr()的作用是將刪除publicPath部分的絕對路徑獲取文件的相對路徑。
按照文件順序引用js文件可以手動設置for循環出htmlWebpackPlugin.files.chunks的entry值插入文件中。
20.loader
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。
本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。
loader能夠import導入任何類型的模塊。
在webpack的配置中loader有兩個目標：
①.test屬性，用於表示出應該被對應的loader進行轉換的某個或某些文件。
②.use屬性，表示進行轉換時，應該使用那個loader。
使用方式：
①配置，在webpack.config.js中指定
②內聯，在每個import語句中顯示指定loader
③CLI，在shell命令中指定
在webpack.config.js中配置loader
在module.exports中添加屬性module
如安裝babel插件（js編譯器），使用此插件轉換ES6代碼，如何安裝根據官網進行安裝：
module:{
rules:[
{ test:/\.js$/,
exclude:/node_modules/,
loader:"babel-loader"
}
]
}
設置preset，指定preset（預配置）設置如何處理js文件
①在rules中設置query:{presets:['latest']}
②在根目錄下創建一個.babelrc文件,其中內容為：
{
"presets":["env"]
}
③在package.json中，增加babel屬性：
"babel":{
"presets":["latset"]
}
21.優化
可以在配置文件中，設置打包范圍，如exclude設置不處理哪些模塊，include處理哪些文件下的內容。
具體可以看官方文檔進行配置。