构建工具webpack & vite

最新推荐文章于 2024-04-25 08:58:20 发布

q1263335155

最新推荐文章于 2024-04-25 08:58:20 发布

阅读量139

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/q1263335155/article/details/128215500

版权

构建工具：

当我们习惯了在node中编写代码的方式后，在回到前端编写htm、css、js这些东西会感觉到各种的不便。比如: 不能放心的使用模块化规范(浏览器兼容性问题)、即使可以使用模块化规范也会面临模块过多时的加载问题。
我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。
构建工具就起到这样一个作用，通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持代码。

webpack：

使用步骤
1. 初始化项目 yarn init -y
2. 安装依赖 webpack 、 webpack-cli
3. 在项目中创建 sre 目录，然后编写代码 (index.js)
4. 执行 yarn webpack 来对代码进行打包(打包后观察dist目录)

配置文件（webpack.config.js）

module.exports={
    mode:'production',//生成环境   开发环境development
    entry:'./index.js',//入口文件,可以是数组，默认不改
    output:{
        fileName:'bund.js',//打包后的文件名
        clear:true,//是否清空上次的打包
        // path:'' 文件的路径
    },
    module:{
        rule:[
            {
                test:/\.css$/i,//css引入
                use:['css-loader','styles-loader']

            },
            {
                test:/\.jpg$/i,//图片引入
                type:"asset/resource"

            }

        ]
    }，
devtool:'inline-source-map'//可以调试源码，源码映射
}