美文网首页
Webpack原理小记

Webpack原理小记

作者: 木头木头我是木头 | 来源:发表于2020-03-25 10:11 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Webpack原理小记

          本文链接:https://www.haomeiwen.com/subject/miftuhtx.html