webpack6-配置一个vue开发环境

webpack-安装配置vue-loader处理单文件组件

目标:

• 配置webpack，让它能够处理vue单文件组件(.vue)

思路：

• 安装vue及处理.vue文件需要的loader和plugins
• 配置webpack

准备素材

1. 添加.vue文件

   在src/vuecomponents/下新建一个App.vue文件 ,写入如下内容

<template>
  <div>
    vue组件 {{title}}
  </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        title:'webpack-vue'
      }
    }
  }
</script>

2.修改入口文件

在main.js中，修改代码如下：

// import '../css/style.css'
import '../css/index.less'

// const { updateDom } = require('./tool.js')
// // es6中的模块化
// import {log} from './tooles6'

// updateDom ('app','index.html,dev-server')

// log('测试webpack是否能识别es6的模块化')

import Vue from "vue"
import App from '../vuecomponents/app.vue'
new Vue({
  render(h) {
    return h(App)
  },
}).$mount("#app")

这里使用Vue及单文件组件。

现在webpack肯定是无法运行的，因为相关loader还没有安装。

安装依赖

安装vuejs

npm i vue -S

它是生产依赖。

安装loader依赖

npm i  vue-loader  vue-template-compiler vue-style-loader -D

vue-loader

配置webpack

做两件事:

• 给.vue文件添加loader
• 添加VueLoaderPlugin

Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    mode: "production",
    entry: './src/js/main.js', // 入口文件
    output: {
        path: path.join(__dirname,'/build'),
        filename: "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    },
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    },
    // 非js模块，在这里处理
    module: {
        rules: [ // 规则
            {
                test: /\.css$/,     // 正则匹配，以.css结尾的文件
                // 如果发现是.css文件，则由如下两个loader来处理
                // 处理的顺序是   从右向左
                // css-loader: 作用是允许.js中引入.css
                // style-loader:作用是在.html上创建style标签，把css代码输入进去

                use: ['style-loader','css-loader'] // 匹配成功，使用指定的loader
            },
            {
                test: /\.less$/,     // 正则匹配，以.less结尾的文件
                // 如果发现是.less文件，则由如下三个loader来处理
                // 处理的顺序是   从右向左
                // less-loader: 作用是加载less文件，会帮你less转成css
                // css-loader: 作用是允许.js中引入.css
                // style-loader:作用是在.html上创建style标签，把css代码输入进去
                
                // use: ['style-loader','css-loader','less-loader'] // 匹配成功，使用指定的loader
                // MiniCssExtractPlugin.loader :把css放在文件中而不是style中
                use: [{loader: MiniCssExtractPlugin.loader},'css-loader','less-loader']
                
            },
            {
                test:/\.(png|svg)$/,// 正则匹配，以.png结尾的文件, 以.svg结尾的文件
                // use:['url-loader'] // 匹配成功，使用指定的loader
                use: [
                    {
                        loader:'url-loader',
                        options:{
                            limit: 3 * 1024 // 限制大小为3k
                        }
                    }
                ]
            },
+            {
                // 如果是.vue文件，使用如下的loader
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            // [name], [hash] 是占位符
            // name: 表示入口文件的名称
            // hash: 一串随机值，是用于区别于本次打包与其它打包的过程。由于源文件有变化，则每次打包时hash都不同
            filename: '[name]-[hash].css',
        }),
        new HtmlWebpackPlugin({ // 打包输出HTML
            minify: { // 压缩HTML文件
              removeComments: true, // 移除HTML中的注释
              collapseWhitespace: true, // 删除空白符与换行符
              minifyCSS: true// 压缩内联css
            },
            filename: 'index.html',
            template: path.resolve('./index.html') // 指定模块的位置
        }),
        new VueLoaderPlugin()
    ]
}

重新打包并启动即可。

npm run dev