webpack教程六：Entry与Output的基础配置

最新推荐文章于 2024-05-02 23:09:04 发布

不睡觉的怪叔叔

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量699

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_35732147/article/details/90664663

版权

Web 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一、多入口打包的配置

二、设置公共路径

一、多入口打包的配置

webpack支持多入口的打包操作吗？答案是肯定的！

让我们修改webpack.config.js:

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPlugin

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js',
        sub: './src/index.js'               
    },                
    output: {
        filename: '[name].js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
            template: './src/template.html'     // 模板
        }),
        new CleanWebpackPlugin()
    ]
};

现在有两个入口，分别是main和sub，而出口文件通过ouput中filename的设置，也将分别根据entry中的chunk name来命名。

进行打包操作，看看是不是这样：

然后打开dist.html：

dist.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="webContent"></div>
<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="sub.js"></script></body>
</html>

dist.html也将生成的两个出口文件都引入了。

二、设置公共路径

如果想让dist.html中对js文件的引入中加入公共路径，比如像这样：

<script type="text/javascript" src="e://webpack/main.js"></script><script type="text/javascript" src="e://webpack/sub.js"></script>

这该怎么设置呢？

很简单，直接设置webpack.config.js中的output即可：

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPlugin

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js',
        sub: './src/index.js'               
    },                
    output: {
        publicPath: 'e://webpack/',
        filename: '[name].js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
            template: './src/template.html'     // 模板
        }),
        new CleanWebpackPlugin()
    ]
};

进行打包操作后，打开dist.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="webContent"></div>
<script type="text/javascript" src="e://webpack/main.js"></script><script type="text/javascript" src="e://webpack/sub.js"></script></body>
</html>

果然增加了公共路径！

不睡觉的怪叔叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack教程六：Entry与Output的基础配置

目录一、多入口打包的配置二、设置公共路径一、多入口打包的配置 webpack支持多入口的打包操作吗？答案是肯定的！让我们修改webpack.config.js: webpack.config.js:const path = require('path');const HtmlWebpackPlugin = require('html-webpac...
复制链接

扫一扫