使用 webpack ,第一步先安装:
npm init -y
npm install webpack webpack-cli
进入到项目的文件夹,命令:
npx webpack
就可以生成dist文件夹
在src的同级目录下创建文件webpack.config.js
创建好了就可以开始编写啦!
今天写的是入口和出口:
const path = require('path')
module.exports={
mode: 'development',
// 入口
entry: {
// 多个入口的写法
main: './src/index.js', // 入口的路径
sub: './src/index.js'
},
// 出口
output: {
path: path.resolve(__dirname,'dist'), // 出口的路径
filename: '[name].js' // 出口的文件名
}
}
'[name].js'
的写法同样是灵活的写出口文件名配置好webpack后 npx webpack
会发现在dist文件夹中生成 main.js 和 sub.js 文件
要想运行起来我们的项目,还需要在dist文件夹中加上html文件,在html文件中引入我们的两个入口文件,但如果再增加一个入口文件,我们还要手动修改,于是我们可以借助 html-webpack-plugin插件
来自动的生成html文件。
npm install --save-dev html-webpack-plugin
const path = require('path')
// 插件html-webpack-plugin 用于用于编译 Webpack 项目中的 html 类型的文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
mode: 'development',
// 入口
entry: {
// 多个入口
main: './src/index.js',
sub: './src/index.js'
},
// 出口
output: {
path: path.resolve(__dirname,'dist'),
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
ps: html-webpack-plugin 仓库源码
当我们想把资源放到CDN上时,往往会在引入时,前面加上地址:
<script src="http://cdn.xx.com/main.js"></script>
我们可以通过在webpack.config.js里的output配置项加上publicPath解决:
const path = require('path')
// 插件html-webpack-plugin 用于用于编译 Webpack 项目中的 html 类型的文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
mode: 'development',
// 入口
entry: {
// 多个入口
main: './src/index.js',
sub: './src/index.js'
},
// 出口
output: {
publicPath: 'http://cdn.xx.com/',
path: path.resolve(__dirname,'dist'),
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
此时html-webpack-plugin插件生成的index.html引入文件时,前面就会自动加上http://cdn.xx.com/
小伙伴们建议参照 官方文档 使用,如果有不正确的地方欢迎指出哦~
更于2021/8/18