webpack 安装,打包使用

2022-10-07 20:34:43

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

全局安装webpack
　　打开文件夹amd输入指令
　　　 npm i webpack -g 这里i是 install 简写后面都是用 i 表示
　　　npm i webpack-cli -g 全局安装
　　　webpack -v 查询webpack版本

一.打包js多个文件

在自己的文件夹(这个文件夹是你要打包的文件夹,我的因为是一个测试的文件夹,demo1,所以我在demo1里面按住shift点击鼠标右键,在此次打开命令窗口)打开命令:

　　1. npm init 这个是初始化package.json 自动将package.json中的模块安装到node-modules文件夹下 ,初始化后一直回车 ,一直回车, 回到显示你的文件夹后在下一步

　　2. 回到文件夹demo1下创建一个main1.js 和 main1.js ,在创建一个webpack.config.js 一定要这样的格式名字

　　3. 然后在你创建的这个webpack.config.js文件夹里面加载node的原有模块

　　4. const path = require('path'); //加载node原有模块path paths是用来对一些路径配置

　　一. entry: 用来写入口文件，它将是整个依赖关系的根当我们需要多个入口文件的时候，可以把entry写成一个对象我建议使用后面一种方法，因为他的规模会随你的项目增大而变得繁琐

　　二.output: 即使入口文件有多个，但是只有一个输出配置如果你定义的入口文件有多个，那么我们需要使用占位符来确保输出文件的唯一性

//加载nide原有模块path  path是对一些路径配置的

const path = require('path');

//导出webpack的配置 ,

module.exports = {

    entry:{

　　　　　　main1 : './main1.js',
　　　　　　main2 : './main2.js'

},//配置入口main.js作为打包入口

    output:{

        //配置输出路径 , 输出到当前目录的dist文件夹 , 现在没有文件夹,他会自己帮你创建

        path:path.resolve(__dirname,'dist'), //把dirname当前目录 ,dirname前面是两个下划线

       filename:'bundle-[name]-[hash].js' //包的名称 ,自己定义名称,打包的名字就是你自己定义的这个 ,name是一个变量,就是你自定义名称加上你要打包的js文件名字,hash是版本号

    },

    mode : 'development' //配置环境 : 开发环境和生产环境

}

　　//执行命令在命令器里输入指令webpack ,让他生成打包文件

一.打包css多个文件

　　1. npm init

　　　　2.创建app1.css

　　　　　　app2.css

　　　　　　在创建min.js

　　　　　　还有webpack.config.js 　　下面代码　　　　　　　　

const path = require('path');//加载nide原有模块path  path是对一些路径配置的

module.exports = {  //导出webpack的配置 ,

    entry: {

            //配置入口main.js作为打包入口

            main :'./main.js',

            },

    output:{

        //配置输出路径 , 输出到当前目录的dist文件夹 , 现在没有文件夹,他会自己帮你创建

        path : path.resolve(__dirname,'dist'),//把dirname当前目录 ,dirname前面是两个下划线

        filename : 'bundle.js' //包的名称 ,自己定义名称,打包的名字就是你自己定义的这个 ,name是一个变量,就是你自定义名称加上你要打包的js文件名字,hash是版本号

    },

    //配置模块

    module :{

        //配置解析规则 ,什么什么文件对应什么loaders

        rules :[

            //配置不同的loaders

            {  //配置css

                test : /\.css$/,     //设置以.css结尾的文件

                use:['style-loader','css-loader']      //这个固定格式

            }

        ]

    },

}