首先Webpack出现在很多面试题上,因为这样可以提高一些项目的性能优化,也可以重新加载编译,将浏览器不认识的语法编译成浏览器认识的语法。less编译成css,ES6语法转换成ES5,介绍完作用就不说废话了,上代码
我们先在项目文件下创建一个"webpack.config.js"的文件
const path =require('path') //配置地址的方法
module.exports={
mode:'development', //指定开发模式
entry:path.join(__dirname,'src','index.js'), //打包的文件入口
output:{
path:path.join(__dirname,'dist'), //打包后创建的文件夹
filename:'bundle.js' //打包后的文件名字
}
}
然后创建index.js的文件,里面可以写一些相关的操作,比如
创建完后再到package.json文件里把build里改为webpack,再使用npm run build打包就行了
打完包后会自动创建我们配置好的文件夹,然后里面会生成一个对应打包后的index.js文件,但是
文件名是自己取的
在我要运行的html'页面里在<script>标签里引入我的index.js的文件,打印出来的就是hello胡瑞了
非常简单,希望对你能有帮助!