-
- gyl_lucy 2022-03-13
webpack基本配置
关于入口文件entry的配置
1、entry:'./src/main.js'
2、entry:['./src/main.js','./src/a.js']
3、entry:{main:'./src/main.js',a:'./src/a.js'}
关于出口文件output
output: {
path:'./dist/js', //打包文件放的位置
filename:'[name]-[hash].js' //打包后的文件名字
}
其中占位符有三种
[name]、[hash]、[chunkhash]
- 0赞 · 0采集
-
- 慕莱坞7063763 2021-02-22
webpack配置的entry和output new
1、entry三种配置方式：
① entry:'./src/main.js'
② entry:['./src/main.js','./src/main2.js']
③ entry:{ app:'./src/app.js', search:'./src/search.js'}
2、output对应上述三个entry的配置
① output:{ path:'./dist/js', filename:'bundle.js'}
③ output:{path:'./dist/js', filename:[name]-[hash/chunkhash].js'}
- 0赞 · 0采集
-
- RaysLiu 2020-06-23
hash and chunkhash
-
截图0赞 · 0采集
-
- RaysLiu 2020-06-23
多页面配置
-
截图0赞 · 0采集
-
- RaysLiu 2020-06-23
多个entry
-
截图0赞 · 0采集
-
- 雪豹1993 2020-01-22
参考网址：https://www.webpackjs.com/guides/output-management/
index.html
<!doctype html> <html> <head> <title>Output Management</title> </head> <body> <script src="./app.bundle.js"></script> </body> </html>
index.js
import _ from 'lodash'; import printMe from './print.js'; function component() { var element = document.createElement('div'); var btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); btn.innerHTML = 'Click me and check the console!'; btn.onclick = printMe; element.appendChild(btn); return element; } document.body.appendChild(component());webpack.config.js
const path = require('path'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };print.js
export default function printMe() { console.log('I get called from print.js!'); }// 清理输出目录
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };- 0赞 · 0采集
-
- qq_幻雨焉缘_0 2019-08-11
webpack.config.js webpack 默认执行的文件
module.exports = {
entry: // 入口配置
output：// 打包输出配置
}
- 0赞 · 0采集
-
- qq_初代_千手柱间 2019-07-02
多个ertry时，用name，hash占位符，生成多个output文件
-
截图0赞 · 0采集
-
- qq_初代_千手柱间 2019-07-02
entry可以是对象形式
-
截图0赞 · 0采集
-
- qq_初代_千手柱间 2019-07-02
entry可以是数组
-
截图0赞 · 0采集
-
- 慕UI6572538 2019-04-09
MD5就可以为任何文件（不管其大小、格式、数量）产生一个同样独一无二的“数字指纹”，如果任何人对文件做了任何改动，其MD5值也就是对应的“数字指纹”都会发生变化。
- 0赞 · 0采集
-
- qq_碓冰拓海_0 2019-03-16
hash是相同的，chunkhash文件名hash值各不相同，并且下次打包只更改修改过的文件的hash
- 0赞 · 0采集
-
- 朱小妞 2019-02-23
hash是相同的，chunkhash文件名hash值各不相同，并且下次打包只更改修改过的文件的hash
-
截图0赞 · 0采集
-
- 潇逸132 2018-11-07
output占位符[name]/[hash]/[chunkhash]
- 0赞 · 0采集
-
- 不去会_死 2018-07-24
output: [name] [hash] [chunkhash]
- 0赞 · 0采集
-
- 阳夕 2018-05-03
多文件打包输出
官网中解释 multi entry
如果多个chunk，filename中就使用占位符[name]、[hash]、[chunkhash]
[name] 文件名
[hash] 打包时的第一行显示hash
[chunkhash] 每个chunk自己的hash值
在output的filename设置的时候，在上线管理静态资源时候，用chunkhash要比hash来的方便和有效率
-
截图0赞 · 0采集
-
- 阳夕 2018-05-03
1：将webpack.dev.config.js中的 entry 字段设置为数组字符串：
entry: ['./src/script/main.js','./src/script/a.js']
打包结果如图，打包原因 single entry 单个入口，两个入口模块被打到multi main模块中，最后生成 bundle.js 文件
2：多页面的时候 entry的写法为
entry:{
page1:"./page1",
page2:["./entry1","./entry2"]
}- 0赞 · 0采集
-
- 木星旅行者 2018-04-25
- filename中不用写真实路径，在path中写。
-
截图0赞 · 1采集
-
- dabear 2018-03-28
filename: '[name]-[chunkhash].js'
改为文件chunk自己的hash值，两个打包模块都不一样，这个hash值可以看做是文件自身的版本号，只有当这个文件发生改变的时候这个hash值才会发生变化 —— 这个特征在项目的上线过程中很有用，只上线那些被改过的文件
-
截图0赞 · 0采集
-
- dabear 2018-03-28
将filename改为占位符，而不是用静态字符串： [name]-[chunk].js
输出如图
-
截图0赞 · 0采集
-
- dabear 2018-03-28
官网中解释 multi entry
如果多个chunk，filename中就使用占位符[name]、[hash]、[chunkhash]
[name] 文件名
[hash] 打包时的第一行显示hash
[chunkhash] 每个chunk自己的hash值
-
截图0赞 · 0采集
-
- dabear 2018-03-28
entry 改为对象类型
entry: { main: './src/script/main.js', a: './src/script/a.js' }但此时打包输出的只有一个 bundle.js 文件
和 output 有关
output: { path: ('./dist/js'), filename: 'bundle.js' }1. 不要在filename中指定绝对路径，因为在path中会指定，否则两个会混乱
2. filename 是用于打包后的每个输出文件，当多输入时（entry为一个对象，多个chunk），同一个filename会被覆盖，最后只生成一个文件
-
截图0赞 · 0采集
-
- dabear 2018-03-28
entry 对一个对象 （似乎现在官网上没有提及 entry 可以是数组）
-
截图0赞 · 0采集
-
- dabear 2018-03-28
[0] 模块 multi main，把两个不相关的模块 main.js 和 a.js 打包在一起
-
截图0赞 · 0采集
-
- dabear 2018-03-28
将webpack.dev.config.js中的 entry 字段设置为数组字符串：
entry: ['./src/script/main.js','./src/script/a.js']
打包结果如图，打包原因 single entry 单个入口，两个入口模块被打到multi main模块中，最后生成 bundle.js 文件
-
截图0赞 · 1采集
-
- MrYanZy 2018-03-07
- entry：{}时，output中的filename需要[name].js站位否则会被覆盖
-
截图0赞 · 0采集
-
- [ 阿凡提的驴 。] 2018-02-25
- 记录
- 0赞 · 0采集
-
- sTone_StarDust 2018-02-23
- 关于entry使用“对象” -- 多模块源 而 output的配置情况的例子： 利用hash值 - 可以对静态资源的管理 - 特别有用 --确保文件名（索引）的唯一性
-
截图0赞 · 0采集
-
- sTone_StarDust 2018-02-23
- 如果entry中是多个的，则output中需要使用占位符等方法来解决导出的模块文件相互覆盖的问题： 占位符： [name] [hash] //打包的hash值 [chunkhash] //chunk的hash值
-
截图0赞 · 0采集
-
- sTone_StarDust 2018-02-23
- webpack.config.js详细配置--entry: entry 可以配置三种值： 字符串 数组 对象（键值对）：适用的场景是多页面
-
截图0赞 · 0采集
