Webpack4.x配置多入口多出口项目

Last updated on 19 7月 2019

在目录下创建src目录,使用npm init -y 生成package.json依赖模块文件,我们把执行命令放在script里面,这样我们只要执行npm run build就可以了.

{
  "name": "webpack4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC"
}

在目录下在创建一个dist目录,里面写个index.html文件

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

在src下创建一个index.js文件

document.write('welcome suzhou');

创建 webpack.config.json文件

const path = require('path');
 
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js' // 表示输出的js文件名
    }
}

这时只要运行一下 npm run build 就可以打包出bundle.js了.

JS多入口(打包到一起,也就是多对一打包)

这时候我们在以上项目目录的基础上,在src下增加一个index2.js文件

document.write('welcome Strive');

我们在编写webpack.config.js,entry入口是支持数组的,而且打包是按数组由前向后打包的。

const path = require('path');
 
module.exports = {
    entry:['./src/index.js','./src/index2.js'],
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js' //名字可以随便起
    }
};

这时候我们只要在执行 npm run build 就可以了.

JS多入口多出口?也就是多对多的实现.

我们继续来编写webpack.config.js

const path = require('path');
 
module.exports = {
    entry:{ //entry入口文件支持json的形式
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    }
}

这时运行 npm run build ,这时dist里面打包出来的就是index-bundle.js和index2-bundle.js了.

如何使html自动引入js文件?

这时候我们想到了每次向html中手动引入script文件太麻烦,如何让它自动引入呢?这时候我们想到了webpack的plugins插件.

首先我们要使用的是html-webpack-plugin插件,这个插件的注意功能就是生成页面.

安装html-webpack-plugin插件,因为是开发的时候需要,所以在后面加-D

而这个插件是依赖webpack和webpack-cli的,所以我们先将webpack和webpack-cli下载到本地

cnpm i webpack@4.1.0 -D
 
cnpm i webpack-cli -D
 
cnpm i html-webpack-plugin -D

安装成功以后,在webpack.config.js里面引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

在webpack.config.js里面的plugins里面配置插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

这时我们就可以执行 npm run build 了.

我们发现自动创建了dist目录,里面有index.html,index-bundle.js,index2-bundle.js目录,并且index.html自动引入了index-bundle.js,index2-bundle.js文件.

html-webpack-plugin插件配置模板HTML文件
我们在src下写一个index.html模板文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html' //模板地址
 
        })
    ]
}

这个时候我们再运行npm run build,我发现自动生成了dist目录,里面的index是我们先前在src里面写的模板文件,并且自动引入了js文件.

自动配置页面title

如果配置了title,一定要在模板html中使用

<title><%= htmlWebpackPlugin.options.title%></title>
- index.html

// index.html模板
<!DOCTYPE html>
<html>
<head>
    <title><%= htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

如何自动消除src引入的缓存问题?

自动引入的src链接，如何消除消除缓存呢?我们只要在html-webpack-plugin配置中增加一个hash为true的配置,它就会自动在引入的src地址后面增加一段hash值

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    plugins:[
        new HtmlWebpackPlugin({
            hash:true, //向html引入的src链接后面增加一段hash值,消除缓存
            title:'I love China',
            template: './src/index.html' //模板地址
        })
    ]
}

那么我们要上线之前是要压缩输出的，如何操作呢?

我们需要向html-webpack-plugin插件中配置minify压缩代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    plugins:[
        new HtmlWebpackPlugin({
            minify:{
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            hash:true,
            title:'I love China',
            template: './src/index.html' //模板地址
        })
    ]
}

多个HTML模板区分输出配置

那么要是我们多个html模板文件,如何区分开生成多个页面呢？

只要以链式的方法,再调用一次html-webpack-plugin插件,每次调用都要指定filename也就是生成页面的名字.调用一次生成一个页面,调用两次生成两个页面,以此类推.

比如说我们在src下在创建一个index2.html模板文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html', //每次调用指定生成的html名称
            minify:{
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            hash:true,
            title:'I love China',
            template: './src/index.html' //模板地址
        }),
        new HtmlWebpackPlugin({
            filename:'index2.html', //每次调用指定生成的html名称
            minify:{
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            hash:true,
            title:'第二个页面',
            template: './src/index2.html' //模板地址
        })
    ]
}

生成的HTML文件引入各自的JS文件配置

那么我们生成多个html文件的时候,我们希望各自引入各自的js文件,那么如何操作呢?

比如说我们希望index.html引入的是index-bundle.js， index2.html引入的是index2-bundle.js如何操作呢?

我们需要在html-webpack-plugin中再配置一个参数,chunks,支持数组,数组里面填写的是引入的js,也就是entry里面配置的key,要引入哪个js就配置entry中的哪个key.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        //打出来是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    plugins:[
        new HtmlWebpackPlugin({
            chunks:['index'], //添加引入的js,也就是entry中的key
            filename:'index.html',
            minify:{
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            hash:true,
            title:'I love China',
            template: './src/index.html' //模板地址
        }),
        new HtmlWebpackPlugin({
            chunks:['index2'], //添加引入的js,也就是entry中的key
            filename:'index2.html',
            minify:{
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            hash:true,
            title:'第二个页面',
            template: './src/index2.html' //模板地址
        })
    ]
}

这个时候我们在执行npm run build,index.html和index2.html分别引入了自己的js文件