webpack构建vue工程

1、npm init -y进行初始化，创建package.json文件

2、npm i -D webpack-cli webpack-dev-server

3、在根目录下新建webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
  // 定义的模式 开发模式
  mode: 'development',
  // 关闭source-map  在开发时，可以进行代码调试，在生产时，一定要关闭，为安全
  devtool: false,
  // 入口
  entry: './src/main.js',
  // 出口
  output: {
    //路径
    path: path.resolve('dist'),
    //文件名
    filename: "index.js"
  },
  // 开发环境
  devServer: {
    port: 8080
  },
  // loader
  module: {
    rules: [
      {
        test: /\.vue$/i,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  // 插件
  plugins: [
    // 它会把index.js文件，自动的加载到html文件中
    new HtmlWebpackPlugin({
      template: path.resolve('public/index.html')
    }),
    new VueLoaderPlugin()
  ],
  resolve: {
    extensions: ['.vue', '.js']
  }
}

4、在根目录下新建src文件，在src文件下建立main.js

5 、在package.json文件中进行开发、打包配置

  "scripts": {
    "serve": "webpack serve",
    "build": "webpack"
  },

6、缺少入口文件（会报404错误），安装npm i -D html-webpack-plugin

7、 在根目录下建立public文件，再在public文件下建立index.html文件

8、npm i -S vue@2一定要加版本号

9、安装相关loader，npm install -D vue-loader@15 vue-template-compiler@2（因为webpack只能解析js文件）