1、创建基本目录结构---src源文件和 index.html
2、初始化项目初始文件---npm init -y
3、配置本地的webpack---- npm install -D webpack-cli
4、创建并配置----webpack.config.js
var path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.join(__dirname, './dist/'),//这里需要拿到当前文件的绝对路径，然后系统会在此基础上创建后面的路径
filename: 'bundle.js' //这个文件名可以更改。但最好起的有意义
}
}
5、配置 npm scripts
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.40.0"
}
}
6、打包 ---npm run build
6.1、在src中新建js文件：main.js 和foo.js
// main.js文件
/* // 等价于
var foo = require('./foo')
foo() */
// ES6的写法
import foo from './foo'
foo()
// foo.js 文件
/* // 等价于
module.exports = function (){
console.log('foo中的js文件')
}
*/
//ES6 的写法
export default function(){
console.log('foo中的js文件')
}
6.2 运行 npm run build
得到build.js文件
7、在index页面中引用build.js文件
得到运行结果
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。