前言:在html项目中遇到了使用import导入npm安装的依赖包,结果就是在浏览器中报错。然后开始了各种的解决方式,最后通过webpack对代码进行编译打包,然后再引入到html页面,从而解决代码报错。
写法一:
步骤:(不写webpack.config.js文件)
第一步:如果项目中没有package.json文件,需要先初始化包管理器 npm i -y
第二步:安转webpack npm webpack webpack-cli -D
第三步:打包文件 npx webpack ./src/main.js --mode=production 【其中./src/mian.js是要被打包的文件路径,--mode=production是打包模式为生产模式】
第四步:在html页面引入打包生成的文件 ./dist.mian.js (这是我项目中打包生成文件的路径)
写法二:
步骤:(新建webpack.config.js文件)
第一二步:同写法一的1、2步。
第三步:创建webpack.config.js文件
const path = require("path")
module.exports={
entry:'./src/main.js', //相对路径
output:{
path:path.resolve(__dirname,"dist"),//绝对路径
filename:'main.js'
},
mode:'production'
}
第四步:在终端 npx webpack 进行打包
第五步:在页面中引入