webpack4编译vue2 + element-ui项目

在 webpack4 编译vue 2 项目的基础上引入 element-ui 需要调整以下文件及代码

安装资源管理

> npm install --save-dev  style-loader css-loader
> npm install --save-dev  node-sass 
> npm install --save-dev  sass-loader
> npm install --save-dev  style-loader
>npm install --save-dev   css-loader

webpack.config.js的文件代码

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue 编译配置
const vueLoaderConfig = {
};

module.exports = {
  entry: {
    index: './src/main.js'
  },
  plugins: [
  new VueLoaderPlugin(),
  new HTMLWebpackPlugin({
      title: 'Code Splitting',
      template:path.join(__dirname, './index.html'),
      filename:'index.html'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader'] }, // css文件
      {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},// scss文件
      {test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']},// 字体
      { test: /\.vue$/, use: 'vue-loader' }, // *.vue文件
      { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader']},// 图片
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }//*.js文件
    ]
  },
  resolve:{
    alias:{
      // 重命名
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  }
};

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-ui资源
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, {
  size: 'medium'
});

new Vue({
    el: '#app1',
    router,
    render: h => h(App)
});