PS 阅读者需要node基础、webpack原理知识、vue基础
安装node 这个网上很多教程
打开终端
创建项目
npm init
全局安装：
cnpm i webpack webpack-dev-server -g
在项目里安装
cnpm i webpack --save
定义项目的目录结构
创建一个app文件夹
在app文件夹创建index.html
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="./main.js"></script> </body> </html>
在 app目录创建main.js
var greeter = require('./Getter.js');
document.getElementById('root').appendChild(greeter());
在 app 目录创建Getter.js
module.exports = funtion() {
var greet = document.createElement('div');
greet.textContent ='学习 webpack'
return greet;
};
在项目的顶层创建webpack.config.js
module.exports = {
devtool: 'eval-source-map', //配置生成Source Maps，选择合适的选项
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "[name].js" //打包后输出文件的文件名
},
}
这时候本项目的终端运行 webpack 命令 就会出现一个main.js 这就实现了简单的打包