vue使用webapck的最基本最简单的开发环境配置

这个配置生成出来的代码只能支持ES6的浏览器下正常显示。

npm init -y

npm install vue-loader vue-template-compiler vue-style-loader css-loader webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

npm install vue --save

 

 

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


const config ={
  entry: {
    app: './src/main.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname,'dist')
  },
  resolve:{
    extensions: ['.js','.vue']
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module:{
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },　　　　

　　　　{

　　　　　　test: /\.css/,

　　　　　　loader: ['vue-style-loader','css-loader']

　　　　}

    ]
  },
  plugins:[
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      inject: true,
      hash: true
    }),
  ]
};
module.exports = config;//千万千万别忘了这一行

　

一直提示can't resolve 'App',解决办法 

在main.js里，import App from "./App";用相对路径就可以了。

环境搭建：

refer: https://www.jianshu.com/p/87b48e29773c