webpack4安裝與學習

在慕課上學習了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處理哪些文件下的內容。

具體能夠看官方文檔進行配置。