vue在webpack4中的配置

1. resolve对象增加，方便.vue等文件import时省略后缀名书写

resolve: {
    extensions: ['*', '.js', '.vue']
},

2. webpack配置文件中引入   vue-loader vue-style-loader css-loader

    module对象增加rules配置，对.vue文件配置，对vue文件中style样式的配置

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
    ]
  },

3. webpack配置文件中引入

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins中追加 new VueLoaderPlugin()

plugins: [
    new HtmlWebpackPlugin({ // 打包输出HTML
      title: 'Hello World app',
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      filename: './index.html',
      template: path.resolve(__dirname, 'src/index.html'),
      // inject: true
    }),
    new VueLoaderPlugin()
]

4. 在weback配置指定的入口文件中 配置将Vue对象实例化

 附上git地址  https://github.com/xss392795158/test-vue      内有webpack配置可参考

npm install 

npm start

访问本地端口3001