初学Webpack

初试 WebPack

如何解决作用域问题

匿名函数自执行的方式

;(function(){
    let myname = '我是name'
})()
//console.log(myname) error·

//如果向外暴露的话
let result = (function(){
    let myname = '我是name'
    return myname
})();
console.log( result ) // 我是name

如何解决代码拆分问题

common.js

moudle.export = {  }

const x = require(' ')

问题：浏览器不能用 common.js

如何让浏览器支持模块

加载  require.js

安装

webpack Vite 作为前端热门的工程化工具各自有各自的使用场景

安装 webpack

首先确保安装了 node.js 因为webpack 是构建在 node.js 之上的

npm i webpack webpack-cli -global   //全局安装 不推荐
webpack -v

npm i webpack webpack-cli --save-dev
npx webpack

自定义配置webpack 配置

创建一个为 webpack.config.js 的配置文件

// webpack.config.js 
const path = require('path')
module.exports = {
    
    entry:'./src/index.js'   //设置需要打包的入口文件
    
    //设置打包出口文件 output 配置对象
    output:{    			
		filename:'bundle.js' //指定输出文件的文件名
    	path:path.resolve(__dirname,'./dist' )    //绝对路径
        clean:'true'
	},
        
    mode:'none'
}

如何自动引入打包后的资源

使用webpack 插件

1.1 使用 HtmlWebpackPlugin

npm i html-webpack-plugin -D

// webpack.config.js 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    
    entry:'./src/index.js'   //设置打包入口文件
    
    //设置打包出口文件 output 配置对象
    output:{    			
		filename:'bundle.js' //z指定输出文件的文件名
    	path:path.resolve(__dirname,'./dist' )    //绝对路径
	},
        
    mode:'none',  //开发模式
   	//数组插件
    plugins:[  
        //配置自动生成的html的选项
        new HtmlWebpackPlugin({   
            template:'./index.html', //模板html文件
            filename:'app.html',	 //生成的html文件名
            inject:'body'			//控制scipt标签生成的位置
        })  
    ],
    //webserver 浏览器实时刷新
    devServer:{
        static:'./dist'
    },
    module:{
        rules:[
            {
                test:'',
                type:'',
            }
        ]
    }
}

//错误指向配置

devtool:'inline-source-map'

观察模式（每次 npx webpack 很麻烦）所以

npx webpack --watch    
//每次保存将自动编译新的代码 但是需要手动刷新浏览器

实时刷新html页面 webpack-dev-server

npm install webpack-dev-server -D

webpack-dev-server 提供一个基本的webserver

配置：

devServer:{
    static:'./dist'  //指定的
}

执行：

npx webpack-dev-server

(图片)资源类型

一，Resource 资源 asset/Resource 他是以URL的形式显示出来的

//配置资源文件
module:{
    rules:[ {
        test:'/\.png$/' // reg正则定义加载的类型 打包后缀为png的突破按
        type:'asset/resource'
    }
    ]
}

如何自己定义文件的目录以及文件名

在output 里设置

output:{
    //设置资源模块文件名 
    assetModuleFilename:'images/[contenthash][ext]'
}

在module 里设置

module:{
   rules:[
       {
       test:'',
       type:'',
       generator:{
       		filename:'images/[contenthash][ext]'
       }
       },
   ]
}

二、asset/inline 是以 Data URL base64 格式显示出来的（图片不会显示在dist文件目录下）

module:{
    rules:[{
        test:/\.svg/ // reg正则定义加载的类型 打包后缀为png的突破按
        type:'asset/inline'
        }
    ]
}

三、asset 是以resource 和 inline 这两种方法选择

//默认情况下webpack会判断资源的大小 大于8kb创建一个资源 小于8kb则base64
module:{
	rules:[
	{
		text:/\.jpg$/,
		type:'asset',
     	 //调整临界值
         parser:{
             dataUrlCondition:{
                 maxSize:4 * 1024 * 1024
             }
         }
	}
	]
}

loader （解析其他文件转化为有效的模块）例： CSS

npm install css-loader -D    //帮助解析css文件 进行导入
npm install style-loader -D   //帮助吧导入的css 放置在页面上

问: 能不能解析其他的css 的预处理文件 比如 sass less ...
less：
npm install less-loader less -D

module:{
    rules:[
        {
            test:/\.(css|less)$/,
            type:['style-loader','css-loader','less-loader']   //从后 往前 进行调用  
        }
    ]
}

抽离出css出来

插件

npm install mini-css-extract-plugin -D   //wp5
const MiniCssExtractPlugin = require('mini-css-extract-plugin‘)

plugins:[
    new MiniCssExtractPlugin({
        filename:'styles/[contenthash].css' //给她设置打包后的默认路劲和文件名称
    })
]
module:{
    rules:[
        {
            test:/\.(css|less)$/,
            type:[MiniCssExtractPlugin.loader,'css-loader','less-loader']   //从后 往前 进行调用  
        }
    ]
}

压缩css

mode:'production'  //改为生产环境
optimization:{
    minimizer:[
        new 
    ]
}