脚本宝典收集整理的这篇文章主要介绍了WebPack2配置我的Vue开发环境,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
首先已经全局安装了node/vue/webpack;
cd demo4
npm inIT -y
这是页面会生成一个package.json文件。
npm install webpack webpack-dev-server vue-loader vue-htML-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-PReset-es2015 babel-runtime@5 --save-dev
npm install html-webpack-plugin --save-dev
npm install vue --save
webpack-dev-server
: webpack-dev-server是一款小型的Node.js ExPress服务器,我们使用它主要是为了实现代码的热重载,具体使用方法可参见webpack-dev-server使用方法,看完还不会的来找我~vue-loader/vue-html-loader/css-loader/vue-style-loader...
: webpack中loader的作用不多讲,用法看文档
vue-hot-reload-api: vue-hot-reload-api顾名思义,亦为实现vue热重载
此时package.json
中的devDePEndencies
和dependencies
应该是这样的:
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^5.8.38",
"css-loader": "^0.26.4",
"vue-hot-reload-api": "^2.0.11",
"vue-html-loader": "^1.2.4",
"vue-loader": "^11.1.4",
"vue-style-loader": "^2.0.3",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"vue": "^2.2.2"
}
demo4
|__dist
| |__js
|__src
| |__index.html
| |__js
| | |__index.js
| |__components
| |__hello.vue
|__node_modules
|__package.json
|__webpack.config.js
dist: 存放生成的文件
src: 存放编辑的文件模板等
components: 存放components组件
src/index.html