1.从零开始搭建一个简单的基于webpack的vue开发环境
a.安装webpack npm i webpack -g
b.项目初始化
1)新建项目文件夹‘myproject’
2)创建package.json.。 npm init -y
3)安装vue,webpack,webpack-dev-server npm i vue --save npm i webpack webpack-dev-server --save-dev
4)根目录下新建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>
</body>
</html>5)根目录下新建webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {};6)新建src文件夹，src文件夹下新建main.js
项目初始化完了之后，整个项目目录是这个样子
c.js模块化
d.引入vue
main.js
import Vue from 'vue';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});e.引入scss和css
f.使用babel转码
g.引入图片资源
h.source-map
2.什么是webpack
webpack是一个打包模块化javascript的工具，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
3.loader，plugin
loader:
loader 让 webpack 能够去处理那些非 JavaScript 文件
对于loader，它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件
loader可以将sass，less文件的写法转换成css，而不在使用其他转换工具。
可以将ES6或者ES7的代码，转换成大多数浏览器兼容的JS代码。
plugin
- css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
- style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
插件目的在于解决 loader 无法实现的其他事
- mini-css-extract-plugin：分离css文件
- clean-webpack-plugin：删除打包文件
