网友回复
第一步.项目初始化
cd 'to/your/path' npm init
第二步、安装 webpack
分为全局安装和项目内安装
npm install webpack -gnpm install webpack --save-dev
第三部.配置webpack.config.js文件
const path = require('path');
module.exports = {
entry: './Script/main.js', //项目入口文件
output:{ //输出编译后文件地址及文件名
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
}
};
命令行里面执行 webpack 命令即可看到编译后的文件
第四步、安装webpack-html-plugin
npm install html-webpack-plugin --save-dev
修改webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './Script/main.js', //项目入口文件
output:{ //输出编译后文件地址及文件名
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
}
};
plugins:[
new HtmlWebpackPlugin({
title:'react 学习',
inject:'body',
filename:'index.html',
template:path.resolve(__dirname, "index.html")
}),
]再次执行webpack命令可看到多了一个index.html文件
这个文件是根据模板生成的并自动引入打包生成的js文件
运行打包后的index.html即可看到效果。
第五步.安装Vue
npm install vue -save
修改main.js:
import Vue from 'vue';
var MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})
修改index.html:
<div id="main">
<h3>{{message}}</h3>
</div> 点击查看剩余70%


