全局安装webpack
npm i webpack@3.12.0 -g
配置支持css文件解析
cnpm i css-loader style-loader –save-dev
-S 配置项目依赖
cnpm i vue vue-router -S
webpack解析vue
cnpm i vue-loader@14.1.1 vue-template-compiler@2.5.17 -D
cnpm i extract-text-webpack-plugin -D
webpack-dev-server –inline –progress –config
“dev”: “webpack-dev-server –inline –progress –config ./webpack.dev.config.js”,
“dev”: “webpack –config ./webpack.dev.config.js”,
template: `
<div>
我是App组件,我的名字是{{name}},年龄是{{age}}。
</div>`
Diy Vue脚手架
全局安装webpack
npm i webpack@3.12.0 -g
新建目录diy-vue-cli
npm init –yes 默认生成一个package.json文件 (管理整个项目中的包)
{
“name”: “diy-vue-cli”,
“version”: “1.0.0”,
“description”: “”,
“main”: “src/main.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}
接着新建index.html文件 !tab 补全代码
新建目录src 新建main.js
配置webpack
cnpm i webpack@3.12.0 -D
-S 配置项目依赖
cnpm i vue vue-router -S
配置webpack
新建目录build
新建文件webpack.dev.conf.js webpack.pro.conf.js
const path = require(“path”)
module.exports = {
entry: “./src/main.js”,
output: {
path: path.resolve(“dist”),
filename: “./bundle.js”
},
//监听文件变化实时编译
watch: true,
//导入时若是这些后缀可以不写,自动解析
resolve: {
extensions: [“.js”, “.vue”, “.json”],
},
module: {
loaders: [
{
test: /.vue$/,
loader: “vue-loader”
},
{
test: /.css$/,
loader: “style-loader!css-loader”
}
]
}
};
webpack解析vue
cnpm i vue-loader vue-template-compiler -D
{
test: /.vue$/,
loader: “vue-loader”
}
webpack解析css
cnpm i css-loader style-loader -D
{
test: /.css$/,
loader: “style-loader!css-loader”
}
配置html文件分离
cnpm i html-webpack-plugin -D
plugins: [
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]
配置webpack-dev-server
cnpm i webpack-dev-server -D
webpack-dev-server –open –hot –inline –progress –config ./build/webpack.dev.conf.js
–open 自动打开浏览器
–hot
–inline 自动刷新
–progress 显示编译过程
–config 指定配置文件
新建App.vue
“dev”: “webpack-dev-server –open –hot –inline –progress –config ./webpack.dev.config.js”,
cnpm i element-ui -S