1、安装node.js环境 这个就不多说了 2、全局安装webpack 命令：npm install webpack -g （不建议全局安装webpack，因为在创建项目时，还是要安装一次） 3、单个项目安装webpack： 命令：npm install webpack --save-dev 4、安装指定版本的webpac 命令：npm install webpack@3.12.0 -D
1、新建个项目目录并在目录中安装webpack 2、初始化目录生成package.json文件 命令：npm init --yes 3、创建index.html文件作为页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"></div> <!--build.js作为打包生成文件--> <script type="text/javascript" src="./build.js"></script> </body> </html>5、创App.js作为引用的组件
var app={ template:'<div>我是一个入口组件</div>' } //声明并导出 export default app; export var num1 = 1;//作为一整个对象key导出 //声明再导出 var num2 = 3; export {num2}; //也可以导出方法 export function add(x,y){ return console.log(x+y); }6、创建main.js作为入口文件
//引用App.js中导出的对象 或者方法 import Vue from './vue.js' import App from './App.js' import {num1,num2,add} from './App.js' console.log(num1); console.log(num2); add(3,4); new Vue({ el:'#app', components:{ App }, template:'<App />' });7、打包入口文件main.js到build.js 第一种打包方式： 低版本的webpack:命令webpack main.js ./build.js 高版本的webpack:命令webpack main.js -o ./build.js 第二种打包方式 在package.json文件中修改
"scripts": { "build": "webpack ./main.js -o ./build.js" },然后在dos命令中：输入npm run build命令 8、编译index.html可以看到页面和控制台的效果为
