nodejs test 運行 gpo 一個 刷新 哈希 splay substr()

在慕課上學習了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文件中 在處理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處理哪些文件下的內容。 具體可以看官方文檔進行配置。

webpack4安裝與學習