webpack.config.js配置说明

最新推荐文章于 2022-08-26 15:30:52 发布

wc_vue@sina

最新推荐文章于 2022-08-26 15:30:52 发布

阅读量356

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_39447467/article/details/105243219

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Webpack如何配置多入口文件，以及多种插件的使用，包括代码热替换、生成HTML文件、提取CSS、报错处理、代码丑化、公共资源抽取、全局挂载插件、自动生成HTML、提取样式、拷贝资源等，旨在帮助开发者更好地理解和应用Webpack。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、多个入口文件

之前我们配置的都是一个入口

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

    //页面入口文件配置
    entry: {
        index: './src/index.js'
    },
    //入口文件输出配置
    output: {

        path: path.join(__dirname, "dist/"),
        filename: "bundle.js"
    }
};

但是有的时候我们需要多个入口文件，这个时候该如何配置？

entry 参数支持设置对象，可以设置多个入口文件，这个时候output的filename就不能是固定名字了，因为入口是多个文件，所以同时也要修改 output参数：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

    //页面入口文件配置
    entry: {
        app: ['./src/index.js'],
        login: ['./src/login.js']
    },
    //入口文件输出配置
    output: {

        path: path.join(__dirname, "dist/"),
        filename: "bundle_[name].js"
    }
};

这里的filename: "bundle_[name].js" 中的[name]是一个正则表达式匹配的，这里的[name]名字指的是键值对的键，上面的实例中第一个入口文件是app: ['./src/index.js']，[name]名字对应的是app而不是index。运行一下webapck命令就会在dist生成bundle_app.js和bundle_login.js两个文件

二、plugins插件

常用Plugins介绍

代码热替换, HotModuleReplacementPlugin

生成html文件，HtmlWebpackPlugin

将css成生文件，而非内联，ExtractTextPlugin

报错但不退出webpack进程，NoErrorsPlugin

代码丑化，UglifyJsPlugin，开发过程中不建议打开

多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin

清理文件夹，Clean

调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

1、CommonsChunkPlugin抽取公共资源

　　CommonsChunkPlugin 常用参数：

name:与 entry 中的键对应

filename:公共文件的输出名字

minChunks ：公共模块被使用的最小次数。比如配置为3，也就是同一个模块只有被3个以外的页面同时引用时才会被提取出来作为common chunks。

minSize：作用类似于minChunks，只不过这里控制的文件大小。

项目中可能会使用很多的第三方插件，如果把所有的插件和自己的js文件，打包成一个js文件，这样网页加载会很慢，并且在优化方面完全可以把第三方插件进行单独的缓存。这个时候就需要把所有的第三方插件单独打包为一个js包。CommonsChunkPlugin插件就可以帮助我们实现这个功能。

CommonsChunkPlugin是一个对象，所以使用的时候要进行实例化

new webpack.optimize.CommonsChunkPlugin('common.js')

CommonsChunkPlugin的参数支持字符串和json

下面我们在webpackDemo中实现CommonsChunkPlugin功能,首先我们通过npm安装 jquery和moment第三方插件:

npm install jquery --save
npm install moment --save

接下来在webpack.config.js文件配置CommonsChunkPlugin

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录


module.exports = {

    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
    entry: {
        app: ['./src/index.js'],
        login: ['./src/login.js'],
        vendors: ['jquery', 'moment'] //需要打包的第三方插件

    },

    //输出的文件名,合并以后的js会命名为bundle.js
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    devServer: {
        historyApiFallback: true,
        contentBase: "./",
        quiet: false, //控制台中不输出打包的信息
        noInfo: false,
        hot: true, //开启热点
        inline: true, //开启页面自动刷新
        lazy: false, //不启动懒加载
        progress: true, //显示打包的进度
        watchOptions: {
            aggregateTimeout: 300
        },
        port: '8088' //设置端口号
    },
    plugins: [
        //new webpack.HotModuleReplacementPlugin()
        //提取公共部分资源
        new webpack.optimize.CommonsChunkPlugin({
            // 与 entry 中的 vendors 对应
            name: 'vendors',
            // 输出的公共资源名称
            filename: 'common.bundle.js',
            // 对所有entry实行这个规则
            minChunks: Infinity
        }),
    ],
    devtool: 'source-map'

};

index.html

由于进行了公共资源的提取，所以页面上要引入公共部分js文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <h1 id="welcome">welcome to 68kejian.com</h1>
    <script src="dist/common.bundle.js"></script>
    <script src="dist/bundle_app.js"></script>
</body>

</html>

index.js

var login=require('./login');
var $=require('jquery');//引用jquery模块

$("#welcome").html(login.sayName());

var userName="考拉";
module.exports.userName=userName;
module.exports.sayName=function(){
    return userName;
};

这个时候运行webpack执行命令在dist目录下面就会生成如下js文件:

2、ProvidePlugin全局挂载插件

ProvidePlugin插件主要是进行设置全局模块，比如jquery插件几乎所有的页面都用到，使用require('jquery')引用写起来比较多，这个时候就可以使用ProvidePlugin 把jquery设置为全局的，每个页面就可以直接使用了。

plugins: [
        //new webpack.HotModuleReplacementPlugin()
        //提取公共部分资源
        new webpack.optimize.CommonsChunkPlugin({
            // 与 entry 中的 vendors 对应
            name: 'vendors',
            // 输出的公共资源名称
            filename: 'common.bundle.js',
            // 对所有entry实行这个规则
            minChunks: Infinity
        }),
        // 把jquery作为全局变量插入到所有的代码中
        // 然后就可以直接在页面中使用jQuery了
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
    ],

index.js

var login=require('./login');
var data = require('data');

$("#welcome").html(data);

3、自动生成html插件html-webpack-plugin

html-webpack-plugin不是webpack的内置插件所以需要单独安装

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

html-webpack-plugin插件默认会在打包根目录生成一个index.html页面，通过相关参数可以定义输出名字以及其它的相关配置，下面我们看一下相关的参数：

new HtmlWebpackPlugin({      title: 'My App',//设置title的名字 
      filename: 'admin.html',//设置这个html的文件名  
      template:'header.html',//要使用的模块的路径  
      inject: 'body',//把模板注入到哪个标签后 'body'      favicon:'./images/favico.ico',//给html添加一个favicon  './images/favico.ico'      minify:true,//是否压缩  true false 
      hash:true,//是否hash化 true false , 
      cache:false,//是否缓存, 
      showErrors:false,//是否显示错误,  
      xhtml:false //是否自动关闭标签 默认false 
    })

下面我们在webpackDemo项目中加入这个插件：

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字  
    entry: {
        app: ['./src/js/index.js'],
        vendors: ['jquery', 'moment']
            //需要打包的第三方插件   
    },
    //输出的文件名,合并以后的js会命名为bundle.js    
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    devServer: {
        historyApiFallback: true,
        contentBase: "./",
        quiet: false, //控制台中不输出打包的信息      
        noInfo: false,
        hot: true, //开启热点   
        inline: true, //开启页面自动刷新  
        lazy: false, //不启动懒加载   
        progress: true, //显示打包的进度     
        watchOptions: {
            aggregateTimeout: 300
        },
        port: '8088' //设置端口号   
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
        //提取公共部分资源       
        new webpack.optimize.CommonsChunkPlugin({
            // 与 entry 中的 vendors 对应          
            name: 'vendors',
            //   // 输出的公共资源名称          
            filename: 'common.bundle.js',
            // 对所有entry实行这个规则      
            minChunks: Infinity
        }),
        // 把jquery作为全局变量插入到所有的代码中
        // 然后就可以直接在页面中使用jQuery了    
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        //生成index.html页面   
        new HtmlWebpackPlugin({
            title: '68kejian.com',
            filename: 'index.html',
            template: 'header.html',
            inject: 'body',
            favicon: './images/favico.ico',
            minify: false,
            hash: true,
            cache: false,
            showErrors: false
        })
    ],
    externals: {
        // require('data') is external and available
        //  on the global var data    
        //      'data': 'data'    
    },
    devtool: 'source-map'
};

header.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>

可以看到htmlWebpackPlugin里面的对象通过<%= htmlWebpackPlugin.options.title %>可以打印到页面里面。

运行webpack命令，就会在dist 目录生成了index.html页面

通过截图可以看到html-webpack-plugin会把生成的js文件自动插入到页面中去。

4、提取样式插件extract-text-webpack-plugin

我们知道webpack使用require()方法可以引用css文件和图片，但是由于它们不像js文件准寻CMD格式，所有在使用的时候需要通过加载器进行处理。需要用到两个基本的加载器:css-loader、style.lader,所谓加载器就是一个处理器，它们会把相关的文件处理为webpack可以使用的规范。加载器不是webpack内置，所有需要npm进行安装，同时，extract-text-webpack-plugin也需要单独安装。

npm install extract-text-webpack-plugin --save-dev
npm install css-loader style-loader less-loader

下面是相关配置：

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
        //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字 
        entry: {
            app: ['./src/js/index.js'],
            vendors: ['jquery', 'moment']
                //需要打包的第三方插件   
        },
        //输出的文件名,合并以后的js会命名为bundle.js   
        output: {
            path: path.join(__dirname, "dist/"),
            publicPath: "http://localhost:8088/dist/",
            filename: "bundle_[name].js"
        },
        devServer: {
            historyApiFallback: true,
            contentBase: "./",
            quiet: false, //控制台中不输出打包的信息   
            noInfo: false,
            hot: true, //开启热点    
            inline: true, //开启页面自动刷新     
            lazy: false, //不启动懒加载   
            progress: true, //显示打包的进度     
            watchOptions: {
                aggregateTimeout: 300
            },
            port: '8088' //设置端口号    },   
            module: {
                loaders: [
                    // 把之前的style&css&less loader改为     
                    {
                        test: /\.css$/,
                        loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
                        exclude: /node_modules/

                    }, {
                        test: /\.less$/,
                        loader: ExtractTextPlugin.extract('style', 'css!less'),
                        exclude: /node_modules/

                    },
                ]
            },
            plugins: [
                new webpack.HotModuleReplacementPlugin()
                //提取公共部分资源   
                new webpack.optimize.CommonsChunkPlugin({
                    // 与 entry 中的 vendors 对应  
                    name: 'vendors', // 输出的公共资源名称     
                    filename: 'common.bundle.js',
                    // 对所有entry实行这个规则        
                    minChunks: Infinity
                }),
                // 把jquery作为全局变量插入到所有的代码中
                // 然后就可以直接在页面中使用jQuery了    
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery',
                    'window.jQuery': 'jquery'
                }),
                //生成index.html页面       
                new HtmlWebpackPlugin({
                    title: '68kejian',
                    filename: 'index.html',
                    template: 'header.html',
                    inject: 'body',
                    favicon: './images/favico.ico',
                    minify: false,

                    hash: true,
                    cache: false,
                    showErrors: false
                }),
                // 分离css      
                new ExtractTextPlugin('[name].bundle.css', {
                    allChunks: true
                }),
            ],
            externals: {
                // require('data') is external and available
                //  on the global var data    
                //      'data': 'data'   
            },
            devtool: 'source-map'
        };

代码详解：

module: {
     loaders: [
         // 把之前的style&css&less loader改为    
         {
             test: /\.css$/,
             loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
             exclude: /node_modules/

         }, {
             test: /\.less$/,
             loader: ExtractTextPlugin.extract('style', 'css!less'),
             exclude: /node_modules/

         },
     ]
 }

module对象用来设置加载器的相关配置， loader就是所有加载器的数组。设置加载器的参数如下：

 test: /\.css$/,//文件类型，在整个项目 目录  
 loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),//使用的加载器 
 exclude: /node_modules/    //排除的目录

ExtractTextPlugin插件的使用和其他的一样，引用、实例化然后在plugins配置。执行webpack命令就会把所有的 js里面引用的css文件抽取到一个css文件里面。

5、拷贝资源插件copy-webpack-plugin

官方这样解释 Copy files and directories in webpack ,在webpack中拷贝文件和文件夹。

需要安装

npm install --save-dev copy-webpack-plugin