因为浏览器识别不了es6的一些语法，所以我们写的代码需要处理成浏览器识别的语言，至于转换的这个工作就交给webpack来做了。
git:[email protected]:ghrGit/webpack001.git
1.先简单写几个待打包的文件
目录结构：
a.js
export default function a(){
console.log(‘module a‘);
}
b.js
export default function b(){
console.log(‘module b‘);
}
app.js 为入口文件
import a from ‘./a‘; import b from ‘,/b‘; a(); b();
2.在demo1下运行npm init -y 生成一个默认的package.json 文件 并配置运行脚本
"dev":"webpack" 运行webpack，默认运行webpack.config.js文件
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.8.1"
}
}
3.在demo1下运行npm i -D webpack 安装项目开发(-D)的依赖 webpack ， 会增加一个node_modules文件夹
4.新建一个dist文件夹，用于放置打包后的文件
5. 在demo1下 新建一个文件webpack.config.js (复制的话请把注释去掉)
const path = require(‘path‘);
module.exports={
entry:‘./src/app.js‘,//打包入口
output:{
path:path.resolve(__dirname,‘dist‘),// 打包后文件的放置的绝对路径
filename:‘main.js‘ //打包生成文件的文件名
}
}
6.在demo1下运行npm run dev 这个时候应该你打包后的文件main.js已经在dist文件夹下面了。
7.在dist新建一个index.html 文件，引入main.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> <script src=‘./main.js‘></script> </html>
8.运行index.html 看console如图
时间： 2024-10-04 09:36:47