webpack3.12.0 打包工具（一些webpack常用加载器和插件的使用）
webpack3.12.0 打包工具，初学知识点
本文内容主要包括一些加载器和插件（分9类）的使用：
css-loader style-loader : 解析css文件
url-loader file-loader : 解析引用资源，例如图片
less less-loader ：解析less文件
html-webpack-plugin ：简化了HTML文件的创建，以便为你的webpack包提供服务
webpack-dev-server ：用于快速开发应用程序
vue-loader vue-template-compiler ：解析vue文件
babel-core babel-loader babel-preset-env babel-plugin-transform-runtime ：解析es6，7，8代码
CommonsChunkPlugin ：用于多入口文件项目打包，可以抽文件公共部分，是webpack自带插件，下载webpack就可以用了。
另外还有webpack ensure（webpack 异步加载）的使用
1.初始化项目，并且下载webpack
进入项目目录，然后输入：
npm init --yes
这个命令执行后，项目中会出现一个package.json文件，然后下载webpack：
npm install webpack@3.12.0 -D
然后项目中就多了package-lock.json文件和node_modules文件夹
2.简单打包示范
先下载vue
npm install vue -D
因为简单示范，我们只用到vue.js，所以我没有执行这个命令，而是直接把vue.js放在了项目目录下，当然也可以下载，然后引用下载的vue.js。
然后建立index.html，main.js，App.js，main.css，test.less文件，在main.js中引用App.js，vue.js,把main.js作为打包的入口文件，然后打包为build.js,在index.html中引入build.js，从而实现页面渲染。
注意：在webpack中，引用js文件可以直接打包，引用css文件需要下载css-loader，style-loader，引用图片需要下载url-loader，file-loader，引用less文件需要下载less和less-loader，另外下载插件html-webpack-plugin，可以生成一个不需要配置的html（就是不需要自己去引入build.js，webpack会自动帮你引入）。
下载以上加载器和插件的命令如下：
npm i css-loader style-loader -D
npm i url-loader file-loader -D
npm i less -D
npm i less-loader -D
less-loader依赖于less，所以下载less-loader之前必须下载less
npm i html-webpack-plugin -D
（1）main.js
//esMoudule模块导入
import './main.css'
import Vue from './vue.js'
import App from './App.js'
new Vue({
el : "#app",
components : {
App : App
},
template : '（2）App.js
import imgSrc from './myimg.png'
import './test.less'
var app = {
data(){
return{
imgSrc : imgSrc
}
},
template : `<div>
我是一个App入口组件<img :src="imgSrc" alt="我的男朋友">
</div>`
};
export default app;
（3）mian.css
body{
background-color: green;
}
（4）test.less
@height:600px;
div{
height: @height;
width: 800px;
background-color: burlywood;
border: 2px solid black;
}
p{
height: @height;
}
（5）index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
（6）webpack.config.js
这个是webpack的默认配置文件，直接在项目目录中添加就可以了，注意名字一定是webpack.config.js，然后执行webpack命令时，就会按照这个配置来执行，当然也可以指定其他的配置文件。
var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : {
//webpack入口文件，可以有一个，也可以是多个，如果是一个，就默认从这个文件开始解析
'main': './main.js'
},
output : {
path : path.resolve('./dist'),//相对转绝对
filename : './build.js'
},
module:{
loaders:[
{
//注意这个地方版本不要太高了，因为webpack下载的版本不高
//<