打包完成之后,会多出一个dist/main.js文件,此文件是被压缩的; 如果想要使用dist/main.js文件,创建一个文件dist/index.html添加如下至dist/index.html: 运行dist/index.html 默认入口: src/index.js; 出口:dist/main.js 在根目录下面创建一个配置文件projectname/webpack.config.js这里的根目录为:/Users/....../CodeLearning/Javascript/Webpack/entry-and-output 此时dist下面生成两个文件了; src/index.html: 此时webpack.config.js: 此时的dist下的index.html就会发生变化: 会变为: 源代码详见: https://github.com/richard1230/CodeLearning/tree/main/Javascript/Webpack/entry-and-output 更多内容请关注公众号 growing0101入口和出口
$pwd
/Users/....../CodeLearning/Javascript/Webpack/entry-and-output
## 安装webpack
$yarn add webpack webpack-cli --dev
##安装特定版本
$yarn add [email protected] [email protected] --dev
## 打包
$npx webpack
<div id="app"></div>
<script src="./main.js"></script>
小结1
自己配置
const path = require('path');
module.exports = {
//入口与出口
entry: './src/index.js',
output:{
//路径
path: path.resolve(__dirname,'dist'),
//路径下的文件
filename: 'main.js'
}
}
将不同的文件打包到各自的文件中
const path = require('path');
module.exports = {
entry: {
main: './src/index.js',
sub: './src/index.js'
},
output:{
path: path.resolve(__dirname,'dist'),
filename: '[name].js'
}
}
$tree ./dist
./dist
├── index.html
├── main.js
└── sub.js
添加能够自动生成dist下面html的插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
const path = require('path');
//此插件作用:自动生成dist/index.html,
// 并且引入生成的js文件即:`dist下面的js文件`
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js',
sub: './src/index.js'
},
output:{
publicPath: 'http://cdn.xxx.com/',//添加这一行之后,dist下生成的index.html里面的src就会补全url
path: path.resolve(__dirname,'dist'),
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
<script defer="defer" src="sub.js"></script>
<script defer="defer" src="http://cdn.xxx.com/sub.js"></script>