欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中Webpack的使用教程

 更新時間：2021年10月28日 14:37:30   作者：daixiangcn  
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下

0.什么是Webpack

在這里插入圖片描述

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。

1.Webpack的使用

1.初始化項目

npm init

2.安裝Webpack需要的包

npm install --save-dev webpack-cli webpack

3.配置Webpack
在 package.json 文件添加執(zhí)行編譯的命令

  "scripts": {
    "webpack": "webpack"
    // 可自定義配置文件："webpack": "webpack --config webpack.js"
  },

4.創(chuàng)建配置文件（默認 webpack.config.js），并配置。

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

5.打包并測試

C:\Users\Daixiang\Desktop\demo>npm run webpack

> demo@1.0.0 webpack C:\Users\Daixiang\Desktop\demo
> webpack --config webpack.config.js

asset bundle.js 4.34 KiB [compared for emit] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 231 bytes
  ./src/index.js 159 bytes [built] [code generated]
  ./src/Base.js 72 bytes [built] [code generated]
webpack 5.59.1 compiled successfully in 113 ms

2.Webpack 的核心概念

  • entry 指定入口文件。
  • output 指定輸出相關信息。
  • loader 可以幫助 webpack 處理那些非 JavaScript 文件。
  • plugins 用于執(zhí)行范圍更廣的任務。

 2.1 entry

2.1.1 單入口

單入口的兩種寫法：

寫法一：entry: ‘./src/index.js'

寫法二：entry: {main: ‘./src/index.js'}

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    // entry: './src/index.js',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

2.1.2 多入口

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    // 多入口
    entry: {
        main: './src/index.js',
        base: './src/Base.js',
        about: './src/About.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

2.2 output

2.2.1 單入口時的輸出

單入口時，自定義輸出文件名。
webpack.config.js

    output: {
    	// 路徑
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: 'bundle.js',
    },

2.2.2 多入口時的輸出

多入口時，動態(tài)輸出文件名。
webpack.config.js

    output: {
    	// 路徑
        path: path.resolve(__dirname, 'dist'),
        // 動態(tài)輸出文件名
        filename: '[name].js',
    },

2.3 loader

loader是讓Webpack處理非js文件的模塊。
loader配置參考文檔：https://webpack.docschina.org/loaders/
webpack.config.js

    module: {
        rules: [
            {
                // 正則匹配文件
                test: /\.js$/,
                // 排除文件夾
                exclude: /node_modules/,
                // 使用指定loader
                loader: 'babel-loader'
            }
        ]
    }

需要注意的是，編譯新增API需要引入core-js
1.使用npm安裝core-js

npm install --save-dev core-js

2.在js入口文件中引入core-js/stable

import 'core-js/stable';

3.打包并測試

npm run webpack

2.4 plugins

plugins是插件，用于執(zhí)行范圍更廣的任務。
plugins配置參考文檔：https://webpack.docschina.org/plugins
以html-webpack-plugin為例，進行插件安裝。
1.使用npm安裝html-webpack-plugin

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

2.配置webpack.config.js文件

const HtmlWebpackPlugin = require(‘html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()],

webpack.config.js

const path = require('path');
// 引入文件，定義常量
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                // 正則匹配
                test: /\.js$/,
                // 排除文件夾
                exclude: /node_modules/,
                // 使用指定loader
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        // 單入口
        // new HtmlWebpackPlugin(
        //     {
        // 指定模板文件，生成的js等文件放入模板文件里
        //         template: './index.html'
        //     }
        // )
        // 多入口
        new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks:['index'],
                minify: {
                    // 刪除注釋
                    removeComments: true,
                    // 刪除空格
                    removeWhitespace: false,
                    // 刪除html標簽屬性的雙引號
                    removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks:['search']
            }
        )
    ],
};

3.打包并測試

npm run webpack

index.html

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <title>index</title>
<script defer=defer src=index.js></script></head>
<body>
</body>
</html>

search.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>search</title>
    </style>
<script defer src="search.js"></script>
</head>
<body>
</body>
</html>

3.Webpack處理css文件

3.1 < style>標簽形式嵌入html

1.安裝css-loader識別js中的css文件，安裝style-loader，將css文件嵌入html中

npm install --save-dev css-loader style-loader

2.配置webpack.config.js文件
webpack.config.js

    module: {
        rules: [
            {
                // 正則匹配
                test: /\.css$/,
                // 使用css-loader,識別js中的css，使用style-loader,將css文件嵌入html中
                // 注意數組的順序，從右向左使用
                use: ['style-loader', 'css-loader']
            }
        ]
    },

3.打包并測試

npm run webpack

3.2 < link>標簽形式引入html

使用css-loader,識別js中的css，使用mini-css-extract-plugin引入css文件。
1.安裝css-loader、mini-css-extract-plugin

npm install --save-dev css-loader mini-css-extract-plugin

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
			......
            {
                // 正則匹配
                test: /\.css$/,
                // 使用css-loader,識別js中的css，使用MiniCssExtractPlugin.loader,引入css文件
                // 注意數組的順序，從右向左使用
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3.打包并測試

npm run webpack

dist/index.html

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <title>index</title>
    <script defer=defer src=index.js></script>
    <link href=css/index.css rel=stylesheet>
</head>
<body>
</body>
</html>

4.Webpack處理css中的圖片

4.1 使用file-loader處理css中的圖片

使用file-loader處理css中的圖片。（v5 已棄用file-loader）
file-loader參考文檔：https://v4.webpack.js.org/loaders/file-loader/
index.css

body{
    background-image: url(./images/3.jpg);
    background-repeat: no-repeat;
}

1.安裝file-loader

npm install --save-dev file-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            ......
            {
                // 正則匹配
                test: /\.css$/,
                // 使用css-loader,識別js中的css，使用MiniCssExtractPlugin.loader,引入css文件
                // 注意數組的順序，從右向左使用
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // 正則匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        // 多入口
        new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks: ['index'],
                minify: {
                    // 刪除注釋
                    removeComments: true,
                    // 刪除空格
                    collapseWhitespace: false,
                    // 刪除html標簽屬性的雙引號
                    removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks: ['search']
            }
        ),
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3.打包并測試

npm run webpack

4.2 使用html-withimg-loader處理html中的圖片

1.安裝html-withimg-loader

npm install --save-dev html-withimg-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                // 正則匹配
                test: /\.js$/,
                // 排除文件夾
                exclude: /node_modules/,
                // 使用指定loader
                loader: 'babel-loader'
            },
            {
                // 正則匹配
                test: /\.css$/,
                // 使用css-loader,識別js中的css，使用MiniCssExtractPlugin.loader,引入css文件
                // 注意數組的順序，從右向左使用
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // 正則匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            },
            {
                // 正則匹配
                test: /\.(html?)$/,
                loader: 'html-withimg-loader'
            }
        ]
    },
    plugins: [
        // 多入口
        new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks: ['index'],
                minify: {
                    // 刪除注釋
                    removeComments: true,
                    // 刪除空格
                    collapseWhitespace: false,
                    // 刪除html標簽屬性的雙引號
                    removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks: ['search']
            }
        ),
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3.打包并測試

npm run webpack

4.3 使用file-loader處理js中的圖片

index.js

import img from './images/1.jpg';

1.安裝file-loader

npm install --save-dev file-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            ......
            {
                // 正則匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            }
        ]
    },
};

3.打包并測試

npm run webpack

4.4 使用url-loader處理圖片

index.js

import img from './images/1.jpg';

1.安裝url-loader、file-loader

npm install --save-dev url-loader file-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            ......
            {
                // 正則匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: 'img/[name].[ext]',
                        esModule: false,
                        limit: 10000  // 小于10k的圖片轉為base64格式
                    }
                }
            }
        ]
    },
};

3.打包并測試

npm run webpack

到此這篇關于JavaScript中Webpack的使用的文章就介紹到這了,更多相關JavaScript Webpack使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • JavaScript中toLocaleString()和toString()的區(qū)別實例分析

    JavaScript中toLocaleString()和toString()的區(qū)別實例分析

    這篇文章主要介紹了JavaScript中toLocaleString()和toString()的區(qū)別,結合實例形式對比分析了toLocaleString()和toString()針對字符串、數組與日期操作過程中的區(qū)別與使用技巧,需要的朋友可以參考下
    2018-08-08
  • 利用Three.js如何實現陰影效果實例代碼

    利用Three.js如何實現陰影效果實例代碼

    使用three.js可以方便的讓我們在網頁中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關于利用Three.js如何實現陰影效果的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-09-09
  • 5種處理js跨域問題方法匯總

    5種處理js跨域問題方法匯總

    本文匯總了解決js跨域問題的5種方法，除了最后一種使用flash解決跨域問題由于過于高端，沒有做出介紹外，其余四種都做了下總結，這里推薦給有相同需求的小伙伴。
    2014-12-12
  • bootstrap組件之按鈕式下拉菜單小結

    bootstrap組件之按鈕式下拉菜單小結

    這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細，需要的朋友參考下吧
    2017-01-01
  • Locate a File Using a File Open Dialog Box

    Locate a File Using a File Open Dialog Box

    Locate a File Using a File Open Dialog Box...
    2007-06-06
  • JS字符串的切分用法實例

    JS字符串的切分用法實例

    這篇文章主要介紹了JS字符串的切分的方法,結合實例形式分析了JavaScript使用split針對字符串進行切分與遍歷的相關技巧,需要的朋友可以參考下
    2016-02-02
  • 如何在vscode中使用Typescript并運行詳解

    如何在vscode中使用Typescript并運行詳解

    在VSCode中編寫的TypeScript代碼不能直接運行,需要先用tsc編譯為JavaScript,然后才能運行,下面這篇文章主要給大家介紹了關于如何在vscode中使用Typescript并運行的相關資料,需要的朋友可以參考下
    2023-05-05
  • js數組去重九種方式以及詳解

    js數組去重九種方式以及詳解

    這篇文章主要給大家介紹了關于js數組去重九種方式以及詳解的相關資料,js數組去重是比較常見的數組操作方式之一,文中介紹了九種方法,需要的朋友可以參考下
    2023-09-09
  • js監(jiān)聽滾動條滾動事件使得某個標簽內容始終位于同一位置

    js監(jiān)聽滾動條滾動事件使得某個標簽內容始終位于同一位置

    js如何監(jiān)聽滾動條滾動事件，使得某個標簽內容始終位于同一位置，下面有個不錯的示例，大家可以參考下
    2014-01-01
  • ECharts地圖繪制和鉆取簡易接口詳解

    ECharts地圖繪制和鉆取簡易接口詳解

    這篇文章主要給大家介紹了關于ECharts地圖繪制和鉆取簡易接口的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ECharts具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2019-07-07

最新評論