webpack5搭建vue3教程

vue-cli 5.0的webpack版本是5,本教程一些惯例尽量和vue-cli保持一致,求同存异.
你需要了解一些基本的webpack知识,比如loader,plugins,resolve

1. 初始化

新建一个目录,在该目录下执行命令

npm init

会提示你一些选项,除了入口文件默认是index.js,我们这里和vue-cli保持一直输入main.js,剩下的直接回车就好.
会在目录下生成一个package.json文件

image.png

image.png

2.搭建webpack环境

npm i webpack webpack-merge webpack-dev-serve webpack-cli -D

webpack是必装的,这个就不用介绍了
webpack-merge 这个是用来合并webpack配置文件的,比如一般项目有三个webpack配置文件,一个基础的 打包图片 样式啥的,一个生产环境的,一个开发环境的.开发环境就需要把基础配置文件合并进来再export
webpack-dev-serve 提供一个本地serve服务器,webpack5自带了一个serve但是传言日志不好,暂时还是dev serve

3.创建目录和文件

image.png

创建红框里的目录和文件,其中index.html为了一致性直接用的vue-cli的index.html.把对ico文件的link那一行删掉

当然,你也可以自己定义一个更简单的,比如这样

4.基本配置

我们先做一个最简单的配置,看看webpack能不能跑起来

webpack.common.js配置

const path = require('path')

module.exports = env =>{
    return {
        entry:'./src/main.js',//入口文件
        stats: 'errors-only',//仅错误时显示logo
        output:{
            filename: 'assets/js/[name].code.js',
            chunkFilename: 'assets/js/[name].bundle.js',//动态导入 分离bundle 比如lodashjs配合注释import(/* webpackChunkName: "lodash" */ 'lodash') 会打包成lodash.bundle.js
            path: path.resolve(__dirname, '../dist'),
        }
    }
}

webpack.prod.js配置

//const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = env =>{
    let pro_config = {
        mode:'production',
        // devtool:'source-map',//开启将会生成map文件
    }

    return merge(common(env),pro_config)  //合并配置
}

main.js

console.log('this is mainjs')

package.json

  "scripts": {
    "build": "webpack  --config build/webpack.prod.js"
  },

都是很基础的配置哈,大概说下逻辑.
当我们在命令行输入npm run build的时候,会执行webpack.prod.js文件,
在prod配置文件里,借助merge插件,会把webpack.common.js里的配置也执行起来.
在common文件里,入口是main.js,打包出口是dist目录
这时候我们执行run build 应该会看到新增加了一个目录,如图所示

image.png

5.根据业务需求配置插件

我们的目标是搭建一个类似vue-cli的脚手架,所以我们需要如下插件

vue-loader

loader 用于对模块的源代码进行转换,vue-loader当然就是对vue代码进行转换,让浏览器能够识别.
vue-loader除了在rules里配置外,还要在plugins配置下,是为了把其他定义的规则应用到vue文件里.

npm install vue@next -S
npm install vue-loader@next @vue/compiler-sfc

webpack.common.js文件:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = env =>{
    return {
        entry:'./src/main.js',//入口文件
        output:{
            filename: 'assets/js/[name].code.js',
            chunkFilename: 'assets/js/[name].bundle.js',//动态导入 分离bundle 比如lodashjs配合注释import(/* webpackChunkName: "lodash" */ 'lodash') 会打包成lodash.bundle.js
            path: path.resolve(__dirname, '../dist'),
        },
        plugins:[
            new VueLoaderPlugin()
        ],
        module:{
            rules:[
                {
                    test:/\.vue$/,
                    loader:'vue-loader'
                },
                // 它会应用到普通的 `.js` 文件以及 `.vue` 文件中的 `