webpack05 多入口文件页面打包配置解析

  • 时间:2018-07-09 22:17 作者:Farmer001 来源:Farmer001 阅读:898
  • 扫一扫,手机访问
摘要:大多数情况,我们用webpack打包单页面应使用,有的时候也会遇到多页面的项目单入口配置一般情况下的配置模板如下:module.exports = { entry: {}, output: {}, module: {}, plugins: [], devServer: {}}entry:配置入口文件

大多数情况,我们用webpack打包单页面应使用,有的时候也会遇到多页面的项目

单入口配置

一般情况下的配置模板如下:

module.exports = {

entry: {},

output: {},

module: {},

plugins: [],

devServer: {}

}

  • entry:配置入口文件的地址,能是单一入口,也能是多入口;
  • output:配置出口文件的地址,支持多出口配置;
  • module:配置板块,主要解析CSS和图片转换压缩等功可以;
  • plugins:配置插件;
  • devServer:配置开发服务功可以;

entry

我们的入口文件一般都是JS文件

entry: {

entry: './src/entery.js'

}

output

output使用来告诉webpack最后打包文件的地址和文件名称

output: {

//打包后的文件路径

path: path.resolve(__dirname, 'dist'),

//打包后的文件名称

filename: 'bundle.js'

}

当然还要引入path板块,这个是nodejs自带的板块;在webpack.config.js文件的头部引入;

const path = require('path');

webpack05 多入口文件页面打包配置解析

打包HTML文件

需要用html-webpack-plugin插件,它会将我们的html模板文件打包,自动生成一个引使用了所有webpack打包的文件的新的html文件:

安装:

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

  • 1

在配置文件的plugins内加载

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

var path = require('path');

var webpackConfig = {

entry: 'index.js',

output: {

path: path.resolve(__dirname, './dist'),

filename: 'index_bundle.js'

},

plugins: [new HtmlWebpackPlugin({

minify:{

removeAttributeQuotes: true,

collapseWhitespace: true

},

template: './src/index.html'

})]

};

这将会产生一个包含以下内容的文件dist/index.html:

webpack App

这样一个最基本的单页面的配置文件如下:

const path = require('path');

module.exports = {

//入口文件的配置项

entry: {

entry: './src/entry.js'

},

//出口文件的配置项

output: {

//输出的路径,使用了Node语法

path: path.resolve(__dirname, 'dist'),

//输出的文件名称

filename: 'bundle.js'

},

//板块:例如解读CSS,图片如何转换,压缩

module: {},

//插件,使用于生产模版和各项功可以

plugins: [new HtmlWebpackPlugin({

minify:{

removeAttributeQuotes: true,

collapseWhitespace: true

},

template: './src/index.html'

})]

//配置webpack开发服务功可以

devServer: {}

}

webpack05 多入口文件页面打包配置解析

多入口配置

多入口配置的时候只要要在entry中多添加一个入口文件

输出文件的时候将filename的值修改为[name].js,作使用是根据入口文件的名称,打包成相同的名称,有几个入口文件,即可以打包出几个出口文件

webpack05 多入口文件页面打包配置解析

同时将定义多个HtmlWebpackPlugin插件,有几个页面就配置几项

module.exports = {

entry: {

client1: './src/client1/client1.js',

client2: './src/client2/client2.js'

},

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'js/[name].bundle.js'

},

plugins: [

new HtmlWebpackPlugin({

title: 'client1',

filename: 'client1.html',

template: 'src/client1/client1.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true

}

}),

new HtmlWebpackPlugin({

title: 'client2',

filename: 'client2.html',

template: 'src/client2/client2.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true

}

})

],

};

#真相来了#

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
【系统环境|软件环境】一步步教你开发、部署第一个去中心化应用 - 宠物商店(2022-03-15 15:13)
【系统环境|软件环境】循序渐进!一文学会高性能开发十大必需掌握的核心技术。(2022-03-15 15:13)
【系统环境|软件环境】Python游戏开发,pygame模块,Python实现贪吃蛇小游戏(2022-03-15 15:13)
血鸟云
手机二维码手机访问领取大礼包
返回顶部