# webpack 编译 vue
## 安装 vue
`npm install vue`
## 安装 vue-loader
`npm install vue-loader -D`
安装完vue-loader后，会自动安装 VueLoaderPlugin 插件，在webpack.config.js配置时，需要用到
## 编译template编译工具
`npm install vue-template-compiler -D`
## webpack 配置
```
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
// commonjs方式进行导出
module.exports = {
mode: 'development', // 不设置，默认是 production, 可选值：none、production、development
entry: './src/index.js',
devtool: 'source-map',
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, './build')
},
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2 // 返回执行 less-loader，直到都执行完毕
}
},
'postcss-loader',
'less-loader'
]
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.ts$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '自定义页面title',
template: './index.html'
}),
new VueLoaderPlugin()
]
}
```