1.新建并初始化项目（npm int -y）,安装webpack，webpack-cli webpack-dev-server
2.安装vue:
npm i vue --save3.dist下建立index.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<script src="build.js"></script></head><body> ???</body></html>
4.src目录下新建两个文件
util.js
module.exports = function say() { ???console.log(‘hello world‘);}main.js
var say = require(‘./util‘);say();5.新建webpack.config.js
var path = require(‘path‘);var webpack = require(‘webpack‘);module.exports = { ???entry: ‘./src/main.js‘, // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包 ???output: { ?????????????filename: ‘build.js‘ // 打包后的文件名 ???}, ???devServer: { ???????contentBase:path.resolve(__dirname,"dist"), ???????historyApiFallback: true, ???????overlay: true ???}};6.修改package.josn
"scripts": { ???"dev": "webpack-dev-server --open --hot", ???"build": "webpack --progress --hide-modules" ?},7.执行npm run dev可以调试，热更新打开，但是不会生成目标js
发布前执行npm run build,生成目标js发布
8.引入vue
main.js
import Vue from ‘vue‘;var app = new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘Hello Vue!‘ ?}});9.
index.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title></head><body> ???<div id="app"> ???????{{message}} ???</div> ???<script src="/dist/build.js"></script> ???</body> /*script也可以放这里*/</html>10.修改webpack.config.js文件
var path = require(‘path‘);var webpack = require(‘webpack‘);module.exports = { ???entry: ‘./src/main.js‘, // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包 ???output: { ?????????????filename: ‘build.js‘ // 打包后的文件名 ???}, ???devServer: { ???????contentBase:path.resolve(__dirname,"dist"), ???????historyApiFallback: true, ???????overlay: true ???}, ???resolve: { ???????alias: { ???????????‘vue$‘: ‘vue/dist/vue.esm.js‘ ???????} ???}};‘vue$‘: ‘vue/dist/vue.esm.js‘这一句给vue起一个别名，否则引入vue需要这样写：
import Vue from ‘vue/dist/vue.esm.js‘;
11.支持css
安装css-loader vue-style-loader
配置loader，匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析
解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
注意：因为我们这里用vue开发，所以使用vue-style-loader，其他情况使用style-loader
css-loader使得我们可以用模块化的写法引入css,vue-style-loader会将引入的css插入到html页面里的style标签里
module: { ???????rules: [ ???????????{ ???????????????test: /\.css$/, ???????????????use: [ ???????????????????‘vue-style-loader‘, ???????????????????‘css-loader‘ ???????????????], ???????????} ???????] ???}我们现在来试下
在src目录下新建style目录，style目录里新建common.css
body { ???background: #fed;}main.js
import ‘./style/common.css‘;发现css样式有用了
12.引入图片资源
基于webpack的vue开发环境搭建
原文地址：https://www.cnblogs.com/cowboybusy/p/10605570.html