Webpack原理小记

webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖的文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件

webpack打包的基本逻辑

1. 初始化参数——从配置文件和Shell语句中读取并合并参数,得出最终的参数
2. 开始编译——用第一步得到的参数初始化Compiler对象,加载所有配置的插件,执行对象中的run方法开始执行编译
3. 确认入口——根据配置中的entry找出所有的入口文件
4. 编译模块——从入口文件出发,调用所有配置的loader对模块进行翻译,再找出该模块依赖的模块,递归查找所有的模块依赖
5. 完成模块编译——经过第四部使用loader对所有模块进行翻译后,得到每个模块被翻译后的最终内容以及他们之间的依赖关系
6. 输出资源——根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk,再把每个chunk转换成一个单独的文件并加入到输出列表中
7. 输出完成——确认好输出内容后,根据配置确认输出的路径和文件名,把文件内容写入到文件系统中

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