webpack --- > 使用vue

// webpack中如何使用 vue:
// 1. 安装vue 的包:  cnpm i vue -S
// 2. 由于在 webpack 中,推荐使用 . vue 这个组件模板文件定义组件, 所以需要安装能解析这种文件的loader cnpm i vue-loader vue-template-compiler -D
// 3. 在main.js 中导入 vue的包,  import Vue from 'vue'
// 4. 定义一个处理.vue 结尾的规则 { test: /\.vue$/, use: 'vue-loader' }
// 5. 导入需要的组件. import login from './login.vue'
// 6. 使用 render 渲染login.   render: c => c(login)

代码如下:首先在命令行 npm install 安装依赖包,启动使用 npm run dev

// webpack.config.js
// webpack 是基于node构建的,webpack的配置文件中,任何合法的Node代码都是支持的
var path = require('path')

// 在内存中生成src下的index.html,同时自动将打包好的bundle.js 导入到页面中
var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令行形式运行webpack 或 webpack-dev-server 的时候,工具会发现,我们并没有提供 要打包的文件的入口和出口文件,此时,他会在webapck.config.js 中寻找 入口和出口文件
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: {
    path: path.join(__dirname, './dist'), // 指定输出文件的名称
    filename: 'bundle.js' // 指定输出文件的名称
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: 'url-loader?limit=5000&name=[hash:8]-[name].[ext]'
      }, // 处理图片路径的url
      // 图片的大小 >= limit 不会被转为base64 , 否则 转为base64格式
      {
        // 处理字体文件的配置
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: 'url-loader?limit=5000&name=[hash:8]-[name].[ext]'
      },
      {
        // 配置 babel 来转换 es语法
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 所有webpack 插件的配置
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    })
  ],
  resolve: {
    alias: {
      // "vue$":'vue/dist/vue.js'
    }
  }
}

// package.json
{
  "name": "02WEBPACK-VUE",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --hot --port 3000 --contentBase src"
  },
  "keywords": [],
  "author": "lizhhhh <543288744@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "^3.4.1",
    "css-loader": "^3.2.0",
    "fibers": "^4.0.1",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^1.9.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "popper.js": "^1.14.7",
    "sass": "^1.22.10",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "vue": "^2.6.10",
    "vue-loader": "^14.2.4",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }
}

// .babelrc
{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}