webpack入门使用

此恨无穷

已于 2023-12-08 18:02:10 修改

阅读量38

点赞数

文章标签： webpack 前端 node.js

于 2023-12-08 17:31:07 首次发布

本文链接：https://blog.csdn.net/qq_73917015/article/details/134883056

版权

Hope NoReferenceError

webpack学习使用

早期网页时同过手动引入js代码，不同的的人负责不同的js很有可能会造成代码全局污染，，代码之间相互引用逻辑关系很强，容易错误。
目前node端自兼容commonJs，可以通过webpack进行代码模块化管理

使用前注意一下webpack本身只能解析js，json文件，如果你直接编译.css或者其他类型语言的，都会报错，
这个需要loader处理一下

安装

项目首先肯定要初始化然后

npm i webpack webpack-cli -d

然后你就可以用import from、 export 语法来随意使用各部分的代码，不会造成全局代码污染，因为导出后本身就变为了局部变量方式引用

入口文件

首先一个项目肯定要有入口文件，要不然一个封闭的系统用都用不了

可以在根目录下创建src目录，和main.js文件,我们就以这个main.js为入口文件吧
可以在src目录下创建几个js文件，里面用export 抛出一个或多个方法或变量
最后在mian.js里引用，即import from

webpack.config.js

我们可以手动在根目录创建一个配置文件，如果用了vscode之类的软件，会有特殊的图标
接着可以写

const path = require('path')
module.exports = {
    entry: './src/main.js',//相对路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',//入口文件输出的文件名
        clean:true,//打包前清空dist目录
    },
    module: {
        rules: [
            {
                test:/\.css$/,//注意不要加引号
                use:['style-loader','css-loader']//执行顺序  右到左  css.loader将普通的css变为commmonjs模块，style动态生成style标签
            },
            {
                test:/\.(png|jpe?g|gif|webp|svg)$/,
                type:'asset',
                parser:{
                    dataUrlCondition:{
                        maxSize:10*1024//小于10kb转化为base64格式，转化空间会变大，但可以减少网络请求，一般不大于5kb 
                    }
                },
                generator:{
                    filename:'static/img/[hash:10][ext][query]'
                }
            },
            {
                test:/\.(ttf|woff2?|map3|map4|avi$)/,//处理音乐，视频字体等
                type:'asset/resource',//webpack内置
                generator:{
                    filename:'static/media/[hash:10][ext][query]'
                }
            }
        ]
    },
    plugins: [
	//插件的安装，如ESlint
    ],
    mode: 'development'
}