webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖的文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件
webpack打包的基本逻辑
- 初始化参数——从配置文件和Shell语句中读取并合并参数,得出最终的参数
- 开始编译——用第一步得到的参数初始化Compiler对象,加载所有配置的插件,执行对象中的run方法开始执行编译
- 确认入口——根据配置中的entry找出所有的入口文件
- 编译模块——从入口文件出发,调用所有配置的loader对模块进行翻译,再找出该模块依赖的模块,递归查找所有的模块依赖
- 完成模块编译——经过第四部使用loader对所有模块进行翻译后,得到每个模块被翻译后的最终内容以及他们之间的依赖关系
- 输出资源——根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk,再把每个chunk转换成一个单独的文件并加入到输出列表中
- 输出完成——确认好输出内容后,根据配置确认输出的路径和文件名,把文件内容写入到文件系统中
webpack.config.js配置
1.webpack的配置文件 由于webpack是基于Node构建的，webpack配置文件中所有的合法node语法都可以用
var path=require('path')
2.如果要配置插件,需要在导出的对象上添加plugins节点
var htmlWebpackPlugin=require('html-webpack-plugin')
3.配置导出对象
module.exports={
//入口文件
entry : path.join(__dirname,'./src/main.js'),
//指定输出选项
output : {
path : path.join(__dirname,'./dist'), //指定输出路径
filename : 'bundle.js' //指定输出文件的名字
},
//插件对象节点
plugins : [
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'), //指定模板文件路径
filename : 'index.html' //设置生成内存页面的的名字
}),
],
//配置所有第三方loader(载入程序)模块
module : {
//第三方模块的匹配规则
rules : [
//这里的test于正则的test一样
//处理css文件的loader
{test : /\.(css|scss)$/,use : ['style-loader','css-loader','sass-loader']},
//处理图片路径的loader 这里的limit为图片的大小(单位是字节)
{test : /\.(jpg|png|gif|jpeg|bmp)$/,use : 'url-loader?limit=349950&name=[hash:8]-[name].[ext]'},
//处理字体图标的loader
{test : /\.(ttf|eot|svg|woff|woff2)$/,use : 'url-loader'},
//把Es6的高级语法转换成浏览器可以识别的低级语言
{test : /\.js$/,use : 'babel-loader',exclude : /node_modules/},
//处理vue文件的loader
{test : /\.vue$/,use : 'vue-loader'}
]
},
//配置导入包的路径
/* resolve : {
alias : { //alias别名 修改vue导入的路径
"vue$" : "vue/dist/vue.js"
}
}*/
}
————————————————
参考文链接：https://blog.csdn.net/mrhuanhuan/article/details/82917242···
参考文链接：https://blog.csdn.net/weixin_33713707/article/details/91443177
