關於webpack的完整學習

時間 2019-12-07

標籤關於 webpack 完整學習简体版

原文原文鏈接

終於學習了一下webpack
webpack 是前端的一個項目構建工具，它是基於Node.js開發出來的一個前端工具。WebPack能夠看作是模塊打包機（bundler），經過分析項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。javascript

爲何要使用webpack

JavaScript和CSS的依賴問題。開發過程當中，JavaScript和CSS的在頁面中的順序問題，常常會形成CSS沒起做用，JavaScript的某個變量和方法找不到。
性能優化。通常瀏覽器請求的文件越多越耗時，請求的文件越大越耗時，尤爲是爲了前端項目的代碼更清晰，結構更合理，咱們採用了MVC，MVVM等不少架構分解出了不少JS文件，無疑又拖慢了網頁的速度。爲了解決這個問題，通常會採用如下兩個方案：
(1)、文件合併。瀏覽器須要下載多個JS文件，而瀏覽器是有併發限制，也就是同時併發只能下載幾個文件。當須要加載的文件很是多，網頁的性能可想而知，因此咱們須要合併多個文件以減小文件的數量。
(2)、文件壓縮。咱們知道文件越大，下載越慢，而針對JavaScript和CSS，裏面的空格，換行這些都是爲了讓咱們讀代碼時更容易閱讀，可是對機器來講，這些對它沒有影響。
提升開發效率。主要體如今：
(1)、 Vendor前綴。在CSS3使用愈來愈多的時候，咱們都知道一些CSS3的新特性，在不一樣的瀏覽器中，CSS有不一樣的前綴，若是咱們手工添加將會很繁瑣，而若是使用構建工具，不少構建工具能夠自動給我添加CSS的Vendor前綴。關於vendor前綴的學習
(2)、單元測試。JavaScript的單元測試在使用MVC或者MVVM的框架後，變得愈來愈容易，而單元測試是質量保證的一個很重要的手段，因此在提交以前，使用構建工具自動跑一遍咱們的單元測試是很是有必要的，能進一步檢測你的項目的健壯性和容錯能力。關於MVVM的學習
(3)、代碼分析。咱們寫的JavaScript不少時候會有一些潛在的bug, 好比忘了添加分號，某個變量沒有等等，使用一些JavaScript的代碼分析工具，能夠很好的幫咱們檢查一些常見的問題。
(4)、版本升級。

Grunt和Gulp

Gulp/Grunt是基於task任務的一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，是基於整個項目進行構建的。Gulp/Grunt在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。如圖：

而webpack把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。如圖：

Webpack的優勢使得Webpack在不少場景下能夠替代Gulp/Grunt類的工具。css

loader

webpack自己只能加載js/json模塊，若是要加載其它類型的文件/模塊, 就須要使用對應的loader進行轉化和加載。
loader能夠將全部類型的文件轉換爲webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。
loader通常以 xxx-loader 的方式命名，xxx表明了這個loader要作的轉化功能，好比：css-loader，json-loader等。html

webpack安裝

全局安裝：npm i webpack -g
項目依賴：npm i webpack --save-dev前端

簡單示例

webpack01.htmljava

<body>
    <div id="test">
        哈哈哈
    </div>
    <script type="text/javascript" src="js/test.js"></script>
</body>

test.jsjquery

import $ from 'jquery';
import '../css/common.css';
$(function () {
    $('#test').addClass("test");
});

經過命令打包：webpack

webpack js/test.js --output dist/bundle.js --mode development

打包完成後項目下多出dist文件夾，把webpack01.html拷貝進去，在頁面上訪問，能夠出現相同效果

webpack把全部依賴打包成一個bundle.js文件，經過代碼分割成單元片斷並按需加載。關於webpack打包原理學習於：https://blog.csdn.net/baozhiq...web

webpack配置文件

除了以上經過命令來打包，還能夠經過配置文件配置webpack的入口文件等等信息,在終端直接執行webpack便可打包。
webpack.config.js正則表達式

const path = require('path');

module.exports = {
    mode: 'production',
    // 入口文件配置
    entry: './js/test.js',
    // 輸出配置
    output: {
        // 出口文件
        filename: 'bundle.js',
        // 設置全路徑
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        // 規則數組, 裏面的每個對象都是在描述一個loader
        rules: [
            {
                //css文件加載，正則表達式css文件的路徑
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                ////圖片文件加載
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        query: {
                            name: 'img/[name]-[hash:5].[ext]'
                        }
                    },
                ],
            },
        ]
    },
    devServer:{
        contentBase: './dist'
    }
};

關於配置文件詳解來自於：https://blog.csdn.net/qq_3977...npm

css文件打包

webpack打包css文件須要添加style-loader和css-loader模塊:npm install css-loader style-loader --save-dev(或者經過配置文件引入)
css-loader讓咱們能使用相似@import和url(...)的方法實現require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒可以把樣式表嵌入webpack打包後的JS文件中。關於測試代碼，上面示例已展現。

webpack插件

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。

HtmlWebpackPlugin

該插件依據一個簡單的模板，幫你生成最終的Html5文件，這個文件中自動引用了你打包後的JS文件。
經過`npm install --save-dev html-webpack-plugin命令安裝。
webpack.config.js的配置:

使用：刪除掉原先打包編譯生成的dist文件夾，從新執行webpack，該插件會自動根據指定的模板頁面幫助咱們建立index.html文件，並作好相關配置引入。

自動編譯打包

webpack-dev-server提供了一個簡單的web服務器，而且可以實時從新加載(live reloading)。
經過npm install --save-dev webpack-dev-server命令安裝。
webpack.config.js的配置：

編譯打包：
package.json中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "babel js --out-dir lib"
 }

終端執行npm start便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。