webpack 安装,打包使用

2024-04-06 01:38•杂谈•阅读 1529

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']      //这个固定格式
                
            }
        ]
    },
}

　　　　3.另外配置css还得下载loaders 和css-loader

　　　　　　指令:　　npm i style-loader --save-dev

　　　　　　　　　　npm i css-loader --save-dev

　　　　　　下载完后执行webpack指令进行打包

三. 打包less文件

　　　　1.创建less文件