30分鐘快速瞭解webpack

Elvis_Yang發表於2019-03-02
Web

前言——webpack現在已成為前端自動化、模組化不可或缺的一款工具，我們可以把它看做是一種模組打包機，它來分析你的專案結構、找到JS模組以及一些瀏覽器不能直接執行的擴充語言（如SASS、LESS等），然後將其打包為合適的格式供瀏覽器使用……

首先要確保你的計算機安裝了nodeJS然後我們就可以開始我們的webpack之路了~~~先來按照如下步驟建立個專案吧：

  1. 初始化package.json檔案
npm init -y
複製程式碼
  1. 下載webpack,在4.0版本需要下載兩個包webpack和webpack-cli(-D的意思是開發環境依賴)
npm install webpack webpack-cli -D
複製程式碼
  1. 這裡插一句，在下面的步驟中童鞋們不要忘記install依賴的模組和外掛哦！
  2. 建立一個webpack配置檔案webpack.config.js
const path = require(`path`);
module.exports = {
    entry:``,
    output:{

    },
    module:{

    },
    plugins:{

    },
    devServer:{
        
    }
}
複製程式碼

這裡先說下幾個核心的配置

  • entry：入口；這是使用webpack的第一步，定義一個入口檔案，相當於輸入（單個或多個）
  • output:出口；也就是打包後檔案輸出到哪裡，可以是定義一個檔案也可以定義一個目錄；path：定義一個路徑（絕對路徑） filename:打包後的檔名；假如是多個入口檔案我們應該這樣寫：filename:`[name].[hash].js`
entry:`../main.js`,
output:{
    path:path.join(__dirname,`../dist`),
    filename:`bundle.js`
},
複製程式碼
  • loader：模組轉換器；來把以前的模組內容轉換為新的JS內容靠的就是loader
  • module：在這裡配置模組規則，webpack打包模組靠的就是這裡定義的模組規則,我們在module中配置一些規則rules，這裡暫且以轉換CSS檔案為例：

(1) test:這裡是一個正則用於匹配轉換的檔案(這裡是以.css字尾結尾的檔案)

(2) loader:如果你只需要一個loader來處理那麼就傳一個字串，如果有多個則寫一個陣列（這裡需要兩個css-loader解析css裡的路徑如背景圖路徑等等，style-loader用來把css檔案內容變為style標籤並插入）轉換的時候是按陣列從右往左去轉換的。

module:{
    rules:[
        {
            test:/.css$/,
            loader:[`style-loader`,`css-loader`]
        }
    ]
}
複製程式碼
  • plugins：外掛；webpack打包會有各種各樣的事件，通過註冊外掛來處理這些事件，在構建流程中的特定時機注入擴充套件邏輯來做一些事情。這裡我們以html-webpack-plugin這個外掛為例，用它來根據模板來生成html檔案到目標目錄下,在配置前不要忘記安裝這個外掛,同時也不要忘記require這個外掛！
npm install html-webpack-plugin -D
複製程式碼

使用的時候使用new關鍵字，同時可以傳遞引數
(1)template:指定產出的html模板

(2)filename:產出html檔名

(3)hash:在引入的JS檔案加入查詢字串避免快取

(4)minify:壓縮

我們也可以按需引入其他的變數引數

plugins:[
    new HtmlWebpackPlugin({
        template:`./src/index.html`,
        filename:`index.html`,
        title:`入門webpack`,
        hash:true,
        minify:{
            removeAttributeQuotes:true
        }
    })
]
複製程式碼
  • devServer：開發伺服器，這裡我們來配置下開發伺服器用來預覽打包後的專案:首先找到package.json新增一個指令碼,在scripts下新增
"dev":"webpack-dev-server --open --mode development"
複製程式碼

這樣我們就可以使用npm run dev來啟動專案了,我們還需要在webpack.config.js中的devServer中來配置:

(1) contentBase:配置靜態檔案根目錄，也就是你打包後的目錄
(2) host:主機(這裡使用localhost)
(3) port:埠(預設8080)
(4) compress:伺服器返回瀏覽器是否使用gzip壓縮(布林值)

devServer:{
    contentBase:`../dist`,
    host:`localhost`,
    port:`8080`,
    compress:true
}
複製程式碼

在使用webpack-dev-server啟動服務後，會注入一個websocket客戶端，主要用來檢測到我們修改內容後通知webpack來重新編譯並重新整理頁面。

截止到這裡，已經可以配置一個簡單的webpack用來打包啦，不過這只是一個入門級的，在實際專案中還遠遠不夠，到這裡如果你還有興趣，請繼續往下走~~

更多的配置

  1. entry以及output進階。在專案中我們可能會有這種需求，那就是配置多個入口檔案，這就涉及到了一個出口檔案的命名問題。
entry: {
    index: `./src/index.js`,
    main:`./src/main.js`
},
output: {
    path: path.resolve(__dirname, `dist`),
    filename: `[name].[hash:8].js`,
}
複製程式碼

當我們有多入口的時候，出口檔案應該像這樣命名，並且可以定義一個hash值，並且可以使用冒號加數字來規定hash的長度。
2. 圖片的支援問題。我們可以使用兩個loader來處理圖片的打包問題，第一個是file-loader來解決CSS等檔案中的引入圖片路徑問題，第二個是url-loader當圖片較小的時候會把圖片BASE64編碼。

{
    test:/.(jpg|png|gif|svg)$/,
    use:`file-loader`,
    include:path.join(__dirname,`./src`),
}
複製程式碼
  1. 編譯less和sass,這裡同樣是配置規則來處理；
const cssExtract=new ExtractTextWebpackPlugin(`css.css`);
const lessExtract=new ExtractTextWebpackPlugin(`less.css`);
const sassExtract=new ExtractTextWebpackPlugin(`sass.css`);
{
    test:/.less$/,
    use: lessExtract.extract({
        use:[`css-loader`,`less-loader`]
    }),
    include:path.join(__dirname,`./src`),
    exclude:/node_modules/
},
{
    test:/.scss$/,
    use: sassExtract.extract({
        use:[`css-loader`,`sass-loader`]
    }),
    include:path.join(__dirname,`./src`),
    exclude:/node_modules/
},
複製程式碼
  1. 轉義ES6和ES7及JSX。我們使用babel來轉義：
{
    test:/.jsx?$/,
    use: {
        loader: `babel-loader`,
        options: {
            presets: ["env","stage-0","react"]
        }
    },
    include:path.join(__dirname,`./src`),
    exclude:/node_modules/
},
複製程式碼
  1. devServer配置伺服器代理，這個在專案中應該是非常常用的了，我們需要配置一個proxy屬性，大多數時候我們在開發中處理跨域也需要用這個去請求後臺介面:
proxy: {
    `/api`: {
        target: `http://172.1.1.1:5000`,
        pathRewrite: {`^/api` : `/api`},
        changeOrigin: true
    }
}
複製程式碼

target的值就是你要請求的IP地址，可以按需自行配置。
在進階中的程式碼中，有配置loader的地方加了一個exclude屬性，這個的作用主要是指定哪些目錄下的檔案不需要進行loader轉換。暫且說這麼多吧，一時就想起了這麼多，有需要的可以留言一起探討，下面再介紹些常用的loader和plugin吧~~

如有使用vue的專案可以配置如下module規則，不需要的可自行刪減

module: {
    rules: [
        {
            test: /.vue$/,
            loader: `vue-loader`,
            options: {
                loaders: {
                    css: `vue-style-loader!css-loader`,
                    less: `vue-style-loader!css-loader!less-loader`
                },
                postLoaders: {
                    html: `babel-loader`
                }
            }
        },
        {
            test: /iview/.*?js$/,
            loader: `happypack/loader?id=happybabel`,
            exclude: /node_modules/
        },
        {
            test: /.js$/,
            loader: `happypack/loader?id=happybabel`,
            exclude: /node_modules/
        },
        {
            test: /.js[x]?$/,
            include: [resolve(`src`)],
            exclude: /node_modules/,
            loader: `happypack/loader?id=happybabel`
        },
        {
            test: /.css$/,
            use: ExtractTextPlugin.extract({
                use: [`css-loader?minimize`, `autoprefixer-loader`],
                fallback: `style-loader`
            })
        },
        {
            test: /.less$/,
            use: ExtractTextPlugin.extract({
                use: [`css-loader?minimize`,`autoprefixer-loader`, `less-loader`],
                fallback: `style-loader`
            }),
        },
        {
            test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
            loader: `url-loader?limit=1024`
        },
        {
            test: /.(html|tpl)$/,
            loader: `html-loader`
        }
    ]
}
複製程式碼

常用plugin簡單介紹

  • extract-text-webpack-plugin:此外掛用來抽離css樣式，假如你的css樣式表很大推薦使用這個，以防止打包在js中引起樣式錯亂.
  • copy-webpack-plugin:在webpack中拷貝檔案和資料夾
  • clean-webpack-plugin:用於在打包前先清空輸出目錄
  • happypack:並行轉換檔案，可以更加快速的構建
  • webpack.optimize.CommonsChunkPlugin:用於提取公共程式碼
  • webpack.DefinePlugin:用於建立一個可以配置的全域性變數，便於開發模式和釋出模式的構建
  • webpack.optimize.UglifyJsPlugin:用來壓縮你的js程式碼

暫時就寫到這裡了，可以做一個入門瞭解，webpack還有好多好多東西….有時間整理下再繼續更新~~

相關文章