13_webpack_加载vue文件

安装vue ，我所安装的版本为2.x

npm i vue@2

 

index.js

import Vue from 'vue';
import App from './App.vue';
new Vue({
  render: (h) => h(App),
}).$mount('#app');

 

因为.vue文件需要被转化为js文件，所以还需要安装一个vue-template-compiler
npm i vue-template-compiler -D
注意 vue-template-compiler要和vue版本一致

 

在使用vue-loader处理vue文件的时候，还需要使用一个插件进行处理
vue-loader-plugin ：安装vue的时候自带的
注意：你的vue版本是在2.x最好vue-loader是16版本之前的如：15版本，否则会报错

webpack.config.js文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.export中：
plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'aa',
      template: './index.html',
    }),
    new ESLintPlugin(),
    new VueLoaderPlugin(),
  ],

 

如果你在.vue编写了样式那么你npm run build的时候必然会报错

我们需要配置.less的规则

 {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
            },
          },
          'postcss-loader',
          'less-loader',
        ],
      },