webpack入門

時間  2020-01-22
標籤 webpack 入門 简体版
原文   原文鏈接

前言

本篇是我通過一週多的時間閱讀博客及官方文檔所寫的文章，算是本身對webpack學習的總結。有篇我的認爲很是不錯的webpack文章貼在最下面的參考連接的第一條。本篇介紹的是用webpack本身搭一個react應用javascript

1、概念

  • 入口(entry)
    入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
  • 輸出(output)
    output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件。
  • loader
    loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。
  • 插件(plugins)
    用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

準備

`npm init` 自動幫你建立package.json文件

`npm install --save-dev webpack // 安裝Webpack`

新建文件夾app、public文件分別用於存放源文件及打包後的存放文件。在app文件夾中建立index.js與index.html文件。再建立一個webpack的配置文件webpack.config.js。使用前記得安裝下webpack `npm install webpack -g`，固然你也能夠不全局安裝。
<!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>webpack</title>
</head>
<body>
    <script src="../public/bundle.js"></script>
</body>
</html>

1.入口

const config = {
  entry: './app/index.js'
};
module.exports = config;

entry就是指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。本項目中的入口文件就是app文件夾中的index.js文件。(多入口及更多選項參考官方文檔)css

2.出口

var config = {
    entry: "./app/index.js", // 入口文件
    output:{
        filename:"bundle.js",   //filename 用於輸出文件的文件名。
        path:path.resolve(__dirname, './public'),   //目標輸出目錄 path 的絕對路徑。__dirname
        publicPath:path.resolve(__dirname, './public') //publicPath取決於你的網站根目錄的位置，由於打包的文件都在網站根目錄了，這些文件的引用都是基於該目錄的。假設網站根目錄爲public，引用的圖片路徑是’./img.png’，若是publicPath爲’/’，圖片顯示不了，由於圖片都打包放在了dist中，那麼你就要把publicPath設置爲」/dist」
    }
}

module.exports = config;

填好入口與出口配置後、在命令行中輸入.node_modules/.bin/webpack --config webpack.config.js 若是你是全局安裝webpack的話可直接輸入webpack --config webpack.config.js,直接輸入webpack也能夠，他會識別當前目錄中的webpack.config.js。而後你就能夠再public文件夾中看到名爲bundle.js文件生成了。html

3.更快捷的執行打包任務

若是你不想每次在命令行中輸入那麼長的代碼,那就在package.json中的scripts字段中配置以下前端

"scripts": {
    "build": "webpack --config webpack.config.js"
    }

無論你是否全局安裝的webpack在scripts中他會自動識別node_modules中的webpack，因此不須要在裏面輸入./node_modules...。如今你能夠再命令行中輸入npm run build進行打包了。java

4.webpack-dev-server

webpack-dev-server 是一個小型的Node.js Express服務器,webpack-dev-server默認會以當前目錄爲基本目錄,除非你制定它.經過webpack-dev-server就可實現熱加載了。使用前須要用npm安裝npm install webpack-dev-server --save-dev，它根據webpack.config.js文件中的選項構建。常見的選項以下：node

webpack-dev-server選項 選項說明
content-Base 默認狀況下，webpack-dev-server會從項目的根目錄提供文件，能夠經過此選項設置文件的目錄名
port 服務器使用的端口，默認狀況下爲8080
inline 設爲true時能夠在文件發生變化時，更新頁面
colors 設置終端輸出字體顏色
historyApiFallback 當設置爲true時，訪問全部服務器上不存在的文件，都會被重定向到/，也就是index.html文件

代碼以下：react

var config = {
    entry: "./app/index.js", // 入口文件
    output: {
        filename: "bundle.js",   //filename 用於輸出文件的文件名。
        path: path.resolve(__dirname, './public')   //目標輸出目錄 path 的絕對路徑。__dirname
    },
    devServer: {
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true,//實時刷新（爲何這個我不加都能熱更新？？？）
        port: 8888, // 想webpack-dev-server在端口8888啓動
    }
}

webpack-dev-server默認會以當前目錄爲基本目錄,由於我指定到了public，因此在public中新建個index.html，並在html中引入當前文件夾中的bundle.js。webpack

在package.json 添加以下代碼就可快捷啓動：web

"scripts": {
    "build": "webpack --config webpack.config.js",
    "server": "webpack-dev-server --config webpack.config.js"
  }

而後再命令行中輸入npm run server啓動webpack-dev-server。並在瀏覽器打開http://localhost:8888/就能夠查看了。修改了index.js中的代碼，也會實時刷新了。正則表達式

5 babel

loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！

Loaders須要單獨安裝而且須要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括如下幾方面：

  • test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
  • loader：loader的名稱（必須）
  • include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
  • query：爲loaders提供額外的設置選項（可選）

css

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

npm install --save-dev style-loader css-loader //安裝
配置以下：

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            }
        ]
    }

能夠認爲他是從後面開始往前面解析 css-loader ==> style-loader，因此若是是less文件除了安裝less-loader以外配置文件應該寫在css-loader後面，以下：

test: /\.less$/,
use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'less-loader' }
    ]
這樣咱們平時最基本的最簡單的配置大體完成了

6.babel

Babel 是一個 JavaScript 編譯器，把用最新標準編寫的 JavaScript 代碼向下編譯成能夠在今天隨處可用的版本。 這一過程叫作「源碼到源碼」編譯， 也被稱爲轉換編譯。其中核心的功能能夠在babel-core模塊中得到。其餘的部分根據用戶的需求來下載：若是想與webpack一塊兒使用，須要安裝babel-loader模塊；若是想使用ES6特性，須要安裝babel-preset-env；若是想使用React JSX，那麼須要安裝babel-preset-react。固然還有一些其餘的配置模塊，這裏並無所有列出。接下來咱們看一個簡單的React例子:

安裝babel相關的： npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
安裝react相關的： npm install react -react-dom --save

webpack.config.js中加入以下代碼：

{
    test: /(\.jsx|\.js)$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [
                "env", "react"
            ]
        }
    },
    exclude: /node_modules/
}

就能實現簡易的react應用了。到目前爲止public中的index.html文件都是本身寫在public文件夾中的，引入js文件都是本身手動的，因此再來介紹下插件

7.plugin

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

HtmlWebpackPlugin這個插件的做用是依據一個簡單的index.html模板，生成一個自動引用你打包後的JS文件的新index.html。這在每次生成的js文件名稱不一樣時很是有用（好比添加了hash值）。在編譯過程當中，插件會依據此模板生成最終的html頁面，會自動添加所依賴的 css, js，favicon等文件

安裝 npm install --save-dev html-webpack-plugin

webpack.config.js頂部引入var HtmlWebpackPlugin = require('html-webpack-plugin');
在config中的plugins字段中添加以下代碼：

plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname , './app/index.html') // 引用app文件夾中的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 id="root"></div>
</body>
</html>

在終端中輸入npm run build,接下來你將會在public文件夾中看到自動生成的index.html文件了。

模塊熱替換(Hot Module Replacement)
模塊熱替換(HMR - Hot Module Replacement)功能會在應用程序運行過程當中替換、添加或刪除模塊，而無需從新加載整個頁面。主要是經過如下幾種方式，來顯著加快開發速度：

  • 保留在徹底從新加載頁面時丟失的應用程序狀態。
  • 只更新變動內容，以節省寶貴的開發時間。
  • 調整樣式更加快速 - 幾乎至關於在瀏覽器調試器中更改樣式。

以前的刷新是頁面全局刷新，若是咱們只想局部刷新即只刷新修改的部分，須要使用webpack的HotModuleReplacementPlugin插件，在devServer中添加hot:true參數，在webpack.config.js的plugins中添加下面的信息:

new webpack.HotModuleReplacementPlugin()

參考連接

入門 Webpack，看這篇就夠了
博客園xfshen的webpack
webpack中文文檔

在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

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