全局安装webpack
打开文件夹amd输入指令
npm i webpack -g 这里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是用来对一些路径配置
//加载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指令进行打包