webpack 入門&配置

時間  2019-11-22
標籤 webpack 入門 配置 简体版
原文   原文鏈接

什麼是Webpack？

webpack 是一個JavaScript程序靜態模塊打包工具,當webpack處理程序時，會遞歸構建一個依賴關係圖，對程序須要的每一個模塊進行編譯、壓縮、打包等，可打包成一個文件或多個文件。javascript

webpack 的核心概念

其中 entry、output、loader和plugins 是 webpack 的四個核心概念css

  • entry（入口）
  • output（輸出）
  • loader
  • plugins（插件）
  • mode（模式）
  • module（模塊）
  • chunk

1. entry

入口起點，是指在 webpack 中應該使用哪一個模塊，來做爲構建內部依賴的開始，webpack 會找出哪些模塊是根據入口起點的文件依賴的。html

每一個依賴的模塊通過處理後，最終都將打包到名叫 buildle 文件中。java

在webpack中設置entry屬性指定一個入口起點或多個入口起點。node

webpack.config.jswebpack

module.exports = {
    entry: "./src/index.js"
}
複製代碼

2. output

output屬性是告訴 webpack 在哪裏輸出咱們建立的 buildle 文件，以及如何命名這些文件和設置這些文件的所在路徑。web

webpack.config.jsnpm

let path = reuqire("path");
module.exports = {
    outpur:{
        path:path.resolve(__dirname,"dist"),
        filename:"build.js"
    }
}
複製代碼

output.path和output.filename 分別指定輸出文件的路徑，和輸出文件的名稱json

3. loader

lodaer 能夠理解爲模塊轉換器，loader 能夠將全部模塊內容轉爲所需的內容，而後在利用 webpack 打包功能，對他們進行處理。瀏覽器

webpack.config.js

module.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['css-loader']
            }
        ]
    }
}
複製代碼

在module對象中的rules屬性必須有包含test和use屬性，這將告訴 webpack 在以.css結尾的文件打包時，先使用css-loader對他進行轉換。

4. plugins

loader 被用於轉換模塊，而 plugins 用於更加普遍的範圍，webpack 提供了豐富的插件解決，基於這些接口咱們能夠作到任何想作的事情。

webpack.config.js

let webpack = require("webpack"); //適用於 webpack 提供的內部插件
let HtmlWebpackPlugin = require("html-webpack-plugin"); //外部插件，基於 npm 安裝
module.exports = {
    plugins:[
        new HtmlWebpackPlugin() //使用插件
    ]
}
複製代碼

5. mode

可選擇development(開發模式)和production(生產模式)中一個來設置mode的值。 webpack.config.js

module.exports = {
    mode: 'production'
};
複製代碼

6. module

在 webpack 中一切皆是模塊，每個模塊都對應一個文件，webpack 會從 entry 開始遞歸找出全部依賴的模塊。

7. chunk

代碼塊，一個 chunk 由多個模塊組成，用於代碼的分割與合併。

配置 webpack

webpack 的配置文件叫作webpack.config.js。是一個導出對象javascript文件。

webpack 配置是標準的Node.js CommonJS模塊。在 webpack 配置文件中，採用require導入文件。

1. 初始化

1.1 建立 & 初始化項目

mkdir webpack-demo && cd webpack-demo && npm init -y
複製代碼

1.2 安裝 webpack, D 是局部安裝

npm install webpack webpack-cli -D
複製代碼

1.3建立 src 和 dist 目標

mkdir src && mkdir dist
複製代碼

建立 src 目錄下的index.js

touch index.js
複製代碼

2 配置 webpack

2.1 配置webpack 文件

mkdir webpack.config.js
複製代碼

2.2 配置 webpack.config.js

let path = path.require("path");
module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"build.js"
    }
}
複製代碼

entry 屬性的配置能夠是多個入口

cd src && mkdir b.js
複製代碼
module.exports = {
    entry:{
        A:"./src/index.js",
        B:"./src/b.js"
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name]"
    }
}
複製代碼

多個入口的狀況下，output.filename屬性值改成"[name]"，這樣輸出的文件名和entry設置的入口文件名一一對應。

2.3 在 src 目錄建立 index.html 文件

touch index.html
複製代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <div> 世界，你好</div>
</body>
</html>
複製代碼

2.4 配置 package.json 文件，可使咱們在命令行使用npm run build

"scripts":{
    "build":"webpack"
}
複製代碼

2.5 配置mode
webpack 的 mode 配置用於提供配置選項告訴 webpack 相應的使用其內置的優化，mode 有三個值：development、production和none。

{
    module.exports = {
        mode: "development"
    }
}
複製代碼

3 配置開發服務器

3.1 安裝依賴

npm install webpack-dev-server -D
複製代碼

3.2 配置 package.json 文件，便於咱們在命令行輸入npm run dev

"scripts":{
    "dev": "webpack-dev-server"
}
複製代碼

3.3 配置webpack.config.js文件

let path = require("path");
    
    module.exports = {
        devServer:{
            contentBase: path.resolve(__dirname,"dist"),
            host:"localhost",
            port:"3000",
            compress:true, // 是否 gzip 壓縮
            open: true // 是否自動打開瀏覽器窗口
        }
    }
複製代碼

4 支持加載 css 文件

  • css-loader
  • style-loader

4.1 安裝 loader

npm install css-loader style-loader -D
複製代碼

loader 執行順序是從右到左，從上到下

4.2 配置webpack.config.js文件

module.exports = {
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:["style-loader","css-loader"] // use屬性值能夠是 []、string和對象
                }
            ]
        }
    }
複製代碼

4.3 配置html-webpack-plugin插件並導入到webpack.config.js文件
html-webpack-plugin 簡化了 HTML 文件的建立，而且可以自動產出一個 HTML 文件，而且在裏面引入產出後的資源。詳情請移步 npmjs 瞭解。

npm install html-webpack-plugin -D
複製代碼
let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        // 若是有多個 HTML 文件 HtmlWebpackPlugin 執行屢次
        new HtmlWebpackPlugin({
            template: "./src/index.html", // 模板的文件路徑
            filename:"main.html", // 將要寫入在 HTML 中的文件名，默認是index.html
            chunks:["A"],
            hash:true, // 在產出的資源後面添加哈希值，以免緩存
            minify:true, //是否對HTML壓縮，默認是true
        })
    ]
}
複製代碼

5 css 分離

由於 css 的下載和 js 能夠一塊兒運行，因此當一個 HTMl 很大時，咱們能夠把 css 分離單獨的文件。

5.1 安裝依賴模塊

npm install mini-css-extract-plugin -D
複製代碼

這個插件能夠 css 提取到單獨是文件中。支持按需加載 css 和 SourceMaps。此插件在 webpack 4上使用。

5.2 配置webpack-config.js文件

let MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    module.exports = {
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:[MiniCssExtractPlugin.loader,"css-loader"] 
                    //該插件自帶一個loader 用來處理css變成css文件形式的
                }
            ]
        },
        plugins:[
            new MiniCssExtractPlugin({
                filename:"style.css"//css 文件名
            })
        ]
    }
複製代碼

5.3 壓縮 JS 和 CSS

由於使用了 css 分離的插件mini-css-extract-plugin，因此這時代碼不在自動壓縮，須要咱們手動壓縮代碼。

5.3.1 壓縮 CSS

安裝依賴

npm install optimize-css-assets-webpack-plugin -D
複製代碼

配置webpack.config.js文件

let OptimizeCss = require("optimize-css-assets-webpack-plugin");
module.exports = {
    plugins: [
        new OptimizeCss()
    ]
}
複製代碼

5.3.2 壓縮 JS

安裝依賴

npm install uglifyjs-webpack-plugin -D
複製代碼

配置webpack.config.js文件

let UglijsWebpackPligin = require("uglifyjs-webpack-plugin");
module.exports = {
    plugins:[
        new UglijsWebpackPligin({
            cache: true,
            parallel: true,// 並行，多進程快速構建打包
            sourceMap: true // 映射代碼源
        })
    ]
}
複製代碼

除了uglifyjs-webpack-plugin以外也可使用terser-webpack-plugin。

5.4 less 和 sass

安裝依賴

npm install less less-loader -D
npm install node-sass sass-loader -D
複製代碼

配置webpack.config.js文件

let path = require("path");
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    module:{
        rules:[
            {
                test:/\.less$/,
                exclude:/node_modules/, // 排除 node_modules 
                include: path.resolve(__dirname,"src"), // 選中範圍
                use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
            },
            {
                test:/\.scss$/,
                exclude:/node_modules/,
                include: path.resolve(__dirname,"src"), 
                use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"]
            }
        ]
    }
}
複製代碼

5.5 添加 CSS3 屬性前綴

有時候爲了處理兼容性問題，咱們須要在 css 中加入-webkit,-ms,-o,-moz 這些前綴。

  • Trident內核：主要表明爲IE瀏覽器, 前綴爲-ms
  • Gecko內核：主要表明爲Firefox, 前綴爲-moz
  • Presto內核：主要表明爲Opera, 前綴爲-o
  • Webkit內核：產要表明爲Chrome和Safari, 前綴爲-webkit

安裝依賴

npm install postcss-loader autoprefixer -D
複製代碼

配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test:/\.scss$/,
                exclude:/node_modules/,
                use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader"]
            }
        ]
    }
}
複製代碼

還須要新建一個postcss.config.js配置文件並配置

touch postcss.config.js
複製代碼
module.exports = {
    plugins:[
        require("autoprefixer")
    ]
}
複製代碼

6 支持圖片

引入圖片的三種方式

  • js
  • css
  • html

6.1 安裝依賴

npm install file-loader url-loader -D
複製代碼

6.2 配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test:/\.(png|jpe?g|fig)/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:200*2024
                    }
                }
            }
        ]
    }
}
複製代碼

file-loader和url-loader的區別是url-loader的limit屬性可設置一個參數。
limit 值在限制大小以內採用 base64，超過採用file-loader

6.3 安裝 HTML 中可用圖片依賴

npm install html-withing-loader -D
複製代碼

配置webpack.config.js文件

module.exports = {
    module: {
        rules:[
            {
                test:/\.html$/,
                loader: "html-withing-loader"
            }
        ]
    }
}
複製代碼

7 轉義 ES6/7/JSX

Babel是一個能夠編譯 JavaScript 的平臺，可以把 ES6/7/JSX 編譯成 ES5。

7.1 安裝依賴

npm install babel-loader @babel/core @babel/preset-env -D
複製代碼

7.2 配置webpack.config.js文件

modules.exports = {
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:[
                    loader: "babel-loader",
                    options: {
                        presets: ["@label/preset-env"], // ES6 轉成ES5 模塊
                    }
                ]
            }
        ]
    }
}
複製代碼

此外，還有分別轉換裝飾器和類的babel包@babel/plugin-proposal-decorators&@babel/plugin-proposal-class-properties。

7.3 @babel/plugin-transform-runtime 插件 從 ES6 編譯 ES5 的過程當中，有一些是不被應用的。例如

給index.js添加 Generator 函數

function *fn(){
    yield "哈哈哈..."
}
console.log(fn().next());
複製代碼

會在瀏覽器控制檯報錯，提示regeneratorRuntime方法找不到。由於此時在編譯後的 js 文件中，沒有regeneratorRuntime的由來，只有使用。

index.js:8 Uncaught ReferenceError: regeneratorRuntime is not defined
複製代碼

@babel/plugin-transform-runtime 就是起到幫助代碼填充在轉義過程當中一些不存在的代碼。該插件在使用時，還需依賴@babel/runtime。

7.4 安裝依賴

npm install @babel/plugin-transform-runtime @babel/runtime -D
複製代碼

7.5 配置webpack.config.js文件

module.exprots = {
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/preset-env"],
                        plugins:["@babel/plugin-transform-runtime"]
                    }
                }
            }
        ]
    }
}
複製代碼

7.6 @babel/polyfill 插件

由於@babel/plugin-transform-runtime並不能解決相似"foobar".includes("foo")實例上的這種問題。若是須要polyfill可以使用@babel/polyfill。

安裝依賴

npm install @babel/polyfill -D
複製代碼

修改index.js文件，可直接在文件裏導入@babel/polyfill使用

import "@babel/polyfill";
'aaa'.includes('a');
複製代碼

基本的配置到此就結束了。

有任何問題歡迎指出。有其餘詳情請移步npm & babel & 中文webpack官網

都看到這裏給點個讚唄 ^_^ ~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程