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