Webpack学习二

Webpack 配置Vue

//使用前先要导入 
import Vue from 'vue'

 const app = new Vue({
   el: '#app',
   data: {
     message: '你好',
   }
 })

然后在webpack.config.js中进行配置：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

el和template的关系：如果同时有el和template，后者会替换前者。

plugin:

通常用于对某个现有架构进行扩展，对webpack现有功能的各种扩展，比如打包优化，压缩文件等

 loader和plugin的区别：

• loader主要用于转换某些类型的模块，它是一个转换器
• plugin是插件，它是对webpack本身的扩展，是一个扩展器

  plugin: [
    //最简单的插件，打包后会在Js文件中增加一段注释
    new webpack.BannerPlugin('版权所有，翻版必究'),
   //HtmlWebpackPlugin：依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html
    new webpack.HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]