webpack4-05-配置vue相关

webpack解析vue会用到的两个包分别为： vue-loader 、 vue-template-compiler

安装：

npm i vue-loader vue-template-compiler -D
复制代码

vue-loader 用于加载 .vue 后缀文件

vue-template-compiler 用于编译模板

还有我们的主角 vue ：

npm i vue -S
复制代码

注意：

在安装 vue-template-compiler 、 vue 包时，两个包的版本必须保持同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时，也应该匹配升级 vue-template-compiler 。

最新目录

lesson-05
    |- build
    |- node-modules
    |- pubilc
    |- package.json
    |- package-lock.json
    |- /src
        |- assets
            |- images
                |- logon.png    // 新增
        |- App.vue              // 新增
        |- index.js
        |- main.js              // 新增

复制代码

配置文件、App.vue、main.js

build/wbpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')   // 新增

const resolve = (dir) =>  path.resolve(__dirname, dir)
module.exports = {
  mode: 'development',
  entry: {
    // app: ['@babel/polyfill', resolve('../src/index.js')]     
     app: ['@babel/polyfill', resolve('../src/main.js')]   // 修改入口文件
  },
  output: {
    filename: 'bundle.js',
    path: resolve('../dist')
  },
  devServer: {
    open: true,
    hot: true,
    port: 3002,
    contentBase: resolve(__dirname, "./dist")
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          // {
          //   loader: 'vue-style-loader'
          // },
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.vue$/,             // 新增
        loader: 'vue-loader'        // 新增
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),          // 新增
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Lesson-05',
      template: resolve('../public/index.html')
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
} 
复制代码

App.vue：

<style lang="scss" scoped>
  #app {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 35px;
  }
</style>


<template>
  <div id="app">
    <div><img src="./assets/images/logo.png"></div>
    <h1>Hello Vue</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
复制代码

main.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#box', 
  render: h => h(App)
})
复制代码

现在可以尝试运行

npm run serve
复制代码

发现完美的跑起了一个简单的vue项目。

完美 +1

到这里其实还没有完，其实需要解决掉两个小问题。

main.js
<img src="@/assets/images/logo.png">

其实这两个问题，都是用配置文件中 resolve 选项配置。

配置如下：

build/webpack.config.js

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

const resolve = (dir) =>  path.resolve(__dirname, dir)
module.exports = {
  mode: 'development',
  entry: {
    app: ['@babel/polyfill', resolve('../src/main.js')]
  },
  output: {
    filename: 'bundle.js',
    path: resolve('../dist')
  },
  devServer: {
    open: true,
    hot: true,
    port: 3002,
    contentBase: resolve(__dirname, "./dist")
  },
  resolve: {                                // 新增
    extensions:['.js', '.json', '.vue'],    // 新增
    alias:{                                 // 新增
      '@': resolve('../src')                // 新增
    }                                       // 新增
  },                                        // 新增
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          // {
          //   loader: 'vue-style-loader'
          // },
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Lesson-05',
      template: resolve('../public/index.html')
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
} 
复制代码

注意：

resolve.extensions 选项默认值是['.js', '.json']，当配置的时候会把默认值给覆盖掉，所以需要把默认值的配置也加上，最终：

...省略
resolve: {
    extensions: ['.js', '.json', '.vue']        // ['.js', '.json']默认值
}
...省略
复制代码

App.vue

...省略

<template>
  <div id="app">
    <div><img src="@/assets/images/logo.png"></div>     // 新增@
    <h1>Hello Vue</h1>
  </div>
</template>

...省略
复制代码

main.js

import Vue from 'vue'
import App from './App'     // 省略了.vue后缀

new Vue({
  el: '#box',
  render: h => h(App)
})

复制代码

再次运行

npm run serve
复制代码

能正常预览说明成功了！最终完成了vue配置。

更多相关的配置可以参vue-loader官方文档