1,webpack安装命令版本匹配号 安装不匹配的版本会报错的 下图匹配的版本
全局安装：
npm install --global webpack@版本号本地安装：
npm init -y //生成配置文件package.json
npm install --save-dev webpack@4.35.3
如果你使用 webpack 4+ 版本，你还需要安装 CLI。如下命令：
npm install --save-dev webpack-cli@3.3.6全局安装和本地安装的区别 ：
全局安装的话 项目代码使用全局的we'b'pack 那么换一个电脑没有全局安装webpack那么这个项目就跑不起来 如果安装了 但是版本号不一致也会出错
本地安装的话 直接安装在项目里面 你把项目用别人的电脑都可以正常使用
开始打包js
目录结构
文件内容
在index.html文件运行代码 浏览器识别不了require方法因为浏览器无法识别 JS 模块化文件(导出导入的都是模块化)
下面开始打包解决
正文
1 .配置打包命令npm run build
**
**打包命令为终端输入： webpack
但是我们的vue项目都是npm run build 我们能不能使用此命令？ ？
答：需要做配置：打开package.json文件 配置scripts：{}
{
"name": "demo03",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./src/main.js",//使用node运行main.js的输出结果
"build": "webpack", //npm run build 就是执行的webpack
"show": "webpack -v"//查看webpack的版本号
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.0.0",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^0.23.1",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.6"
}
}
2.配置打包文件的出入口
在项目根目录新建webpack.config.js文件
const path =require('path')
module.exports={
mode:'development',//production development开发环境不压缩dist
entry:'./src/main.js', //我们在main.js(主入口)引入了其他文件的js
output:{
path:path.join(__dirname,'./dist/'), //输出的文件目录为dist
filename:'bundle.js' //打包后的文件名为bundle.js
}
}输入打包命令：
npm run build 打包后会发现出现一个dist文件夹
此时html引入打包后的js文件
此时运行html代码正常执行
