Vue3中Webpack基本打包：

前言：vue3集合到内设=配置vue.config.js

一般使用vue不会外加loader---直接打包（npm run build  ）一般配置vue.config。js只配置别名

目录

正在上传…重新上传取消

安装：（具体项目一般局部安装webpack即可）

正在上传…重新上传取消

老师电脑的版本：

Webpack 5.37.1

Webpack-cli 4.7.0

正在上传…重新上传取消

安装指定的webpack版本：

Npm install webpack@版本号 -g/-D

核心：

打包的流程：

通过webpackà（npm run build）à把src下的文件打包（过程：通过找到src下的index.js{后期可改入口} 的入口）

（一）Js文件打包：

  1.初始化项目：npm init -y

正在上传…重新上传取消

2.安装webpack(局部安装) 

本地安装(局部安装)npm install webpack -D/npm install webpack-cli -D

生产阶段：npm install webpack.. –save-dev

开发阶段：npm install vue -dev

安装指定：npm install webpack@....              

卸载： npm unistall webpack

正在上传…重新上传取消

3使用webpack:

 配置：build

正在上传…重新上传取消

 使用：npm run build

使用（法二了解npx）：不需要配置直接 npx webpack

{ npx 在本地node_modules下寻找webpack/webpack-cli}

  

4.结果生成打包文件dist

5扩展：必备知识修改入口和出口

正在上传…重新上传取消

法一：修改入口和打包出口：

正在上传…重新上传取消

法二：

正在上传…重新上传取消

Output:{}一般默认build

（二·）Css文件打包:

前言

1.模块化打包：

正在上传…重新上传取消

2webpack不认识css—通过cssloader来解析

正在上传…重新上传取消

Css打包使用css-loader和style-loader  （重点）

安装：

正在上传…重新上传取消

  配置：

     1main.js(index.js)

正在上传…重新上传取消

2webpack.config.js

正在上传…重新上传取消

使用：npm run build

正在上传…重新上传取消

01打包less文件:同打包css

正在上传…重新上传取消

（三）图片,字体等资源打包：

图片：

Bgi(url)

安装file-loader

正在上传…重新上传取消

配置：

正在上传…重新上传取消

使用：npm run build

正在上传…重新上传取消

Img(bug：没打包—问题相对路径)

安装：

正在上传…重新上传取消

正在上传…重新上传取消

文件的命名：

正在上传…重新上传取消正在上传…重新上传取消

图片：

正在上传…重新上传取消正在上传…重新上传取消

正在上传…重新上传取消正在上传…重新上传取消

字体：

正在上传…重新上传取消

正在上传…重新上传取消正在上传…重新上传取消

（四）webpack打包插件：

正在上传…重新上传取消正在上传…重新上传取消

 插件一：每次打包自动删除前一个dist（build）

正在上传…重新上传取消正在上传…重新上传取消

插件二：打包html文件

正在上传…重新上传取消正在上传…重新上传取消

自定义Html模板:

正在上传…重新上传取消正在上传…重新上传取消

正在上传…重新上传取消正在上传…重新上传取消

插件三：definePlugin

一般打包html会使用到definePlugin

正在上传…重新上传取消正在上传…重新上传取消

小结：打包html

法一：

正在上传…重新上传取消

法二：

正在上传…重新上传取消正在上传…重新上传取消

插件四：文件复制

正在上传…重新上传取消

正在上传…重新上传取消正在上传…重新上传取消

插件五（了解）：

正在上传…重新上传取消正在上传…重新上传取消

(五)mode配置

正在上传…重新上传取消正在上传…重新上传取消

正在上传…重新上传取消

（六）Vue文件打包：

Vue2打包：

Vue文件准备：

正在上传…重新上传取消正在上传…重新上传取消

配置和打包：（-D）

正在上传…重新上传取消正在上传…重新上传取消

Vue3打包：

  Vue文件的准备：

正在上传…重新上传取消正在上传…重新上传取消

   安装配置和打包：

正在上传…重新上传取消正在上传…重新上传取消

正在上传…重新上传取消正在上传…重新上传取消

Vue2与vue3的区别：

正在上传…重新上传取消正在上传…重新上传取消

（七）其他Asset 、其他loader和babel（了解）

Asset module type(了解即可)

正在上传…重新上传取消正在上传…重新上传取消

使用：

正在上传…重新上传取消正在上传…重新上传取消

url-loader

正在上传…重新上传取消正在上传…重新上传取消

url-loader和file-loader选一个即可

正在上传…重新上传取消

Babel（了解）官网：

正在上传…重新上传取消正在上传…重新上传取消

 Bable这个插件：可以将es6文件转化为es5(例如箭头函数-普通函数)

正在上传…重新上传取消正在上传…重新上传取消

（八）搭建本地服务器

正在上传…重新上传取消正在上传…重新上传取消

Watch:

正在上传…重新上传取消正在上传…重新上传取消

Webpack-dev-server(重要)：

会用即可

Vscoder：live-server插件==实时渲染页面（自动刷新页面的功能）

其他编译器：安装 npm install webpack-dev-serve -D

正在上传…重新上传取消正在上传…重新上传取消

Webpack-dev-serve基本使用：

安装,配置使用：

正在上传…重新上传取消正在上传…重新上传取消

其他功能固定配置（复制即可）

正在上传…重新上传取消正在上传…重新上传取消

解决跨域问题：devServer

Webpack devServer中的 proxy 实现跨域的解决

    devServer: {

         proxy: {

         // 凡是以/api开头的请求，都转化请求路径

             '/api': {

                 target: 'http://localhost:4000',

                 pathRewrite: {'/api':''},

                 changeOrigin: true,

                 secure: false

             }

         }

    },

热更新HMR:（了解）

正在上传…重新上传取消正在上传…重新上传取消

（九）webpcke开发和生成环境分离：

具体看代码

安装个：webpake-merge -D  (作用：整合webpek.confing.js)

正在上传…重新上传取消正在上传…重新上传取消

将webpake.confing.js分离为这三个文件：开发时，生成时，公共的

正在上传…重新上传取消正在上传…重新上传取消

正在上传…重新上传取消正在上传…重新上传取消

（十）ts文件打包{vue-ts项目}：有

   原理：通过webpael打包ts文件-然后浏览器就可使用了

   使用webpake对ts文件打包-ts-loader: {出bug打包不了}

正在上传…重新上传取消正在上传…重新上传取消

正在上传…重新上传取消正在上传…重新上传取消

Npm run build->生成dist文件

(十一)vue3中配置vue.config,js(一般不管是vue2/vue3webpack只需要配置别名即可-或配置出口)

官网：配置参考 | Vue CLI (vuejs.org)

打包css的配置。。。。

例如：打包css文件---安装css-loaderOPtions+配置vue.config.js++npm run build

正在上传…重新上传取消正在上传…重新上传取消

一般使用vue不会外加loader---直接打包（npm run build  ）一般配置vue.config。js只配置别名

正在上传…重新上传取消正在上传…重新上传取消

Vue2的文件模板：

const path = require('path')

module.exports = {

    publicPath: "./", // 公共路径 默认为"/"，建议使用"./"相对路径

    devServer: {   // 本地服务器配置(npm run serve)

      port: 8080, // 端口

      host: "localhost", // 域名

      https: false, // 是否开启https

      open: true    // 是否在开启服务器后自动打开浏览器访问该服务器

    },

    lintOnSave: false,  // 取消lint语法检测，此处可不配置

    outputDir:"dist", // build打包输出目录

    assetsDir:"assets", // 静态文件输出目录，基于dist

    indexPath: "index.html",  // 输出html文件名

    productionSourceMap: false, // 取消.map文件的打包，加快打包速度

    chainWebpack: (config) => {

        // process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度

        const svgRule = config.module.rule('svg');

        svgRule.uses.clear();

        svgRule

            .use('babel-loader')

            .loader('babel-loader')

            .end()

            .use('vue-svg-loader')

            .loader('vue-svg-loader');

    }

};

Vue3的文件模板：

const webpack = require('webpack')

module.exports = {

    //部署应用包时的基本 URL

    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',

    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录

    outputDir: 'dist',

    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录

    assetsDir: 'assets',

    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效

    lintOnSave: true,

    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template

    runtimeCompiler: true,

    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  

    productionSourceMap: true,

    configureWebpack: config => {

        if (process.env.NODE_ENV === 'production') {

            // 为生产环境修改配置...

        } else {

            // 为开发环境修改配置...

        }

    },

    // css相关配置

    css: {

        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false

        extract: true,

        // 开启 CSS source maps?

        sourceMap: false,

        // css预设器配置项

        loaderOptions: {},

        // 启用 CSS modules for all css / pre-processor files.

        modules: false

    },

    // webpack-dev-server 相关配置

    devServer: { // 设置代理

        hot: true, //热加载

        host: '0.0.0.0', //ip地址

        port: 8085, //端口

        https: false, //false关闭https，true为开启

        open: true, //自动打开浏览器

        proxy: {

            '/api': { //本地

                target: 'xxx',

                // 如果要代理 websockets

                ws: true,

                changeOrigin: true

            },

            '/test': { //测试

                target: 'xxx'

            },

            '/pre': { //预发布

                target: 'xxx'

            },

            '/pro': { //正式

                target: 'xxx'

            }

        }

    },

    pluginOptions: { // 第三方插件配置

        // ...

    }

}

Bug:

1局部安装（安装不了）：

环境变量问题：

目录：webpack.cmd

正在上传…重新上传取消正在上传…重新上传取消

2执行webpack报错

正在上传…重新上传取消正在上传…重新上传取消

问题（一）版本号过高：解决方式：npm install webpack@低版本

问题（二）入口报错

正在上传…重新上传取消正在上传…重新上传取消

解决方式：修改入口和出口

3使用插件打包html报错：

原因：plugin:【】写错

正在上传…重新上传取消正在上传…重新上传取消

解决：

正在上传…重新上传取消正在上传…重新上传取消

4使用插件复制报错：（未解决）

正在上传…重新上传取消正在上传…重新上传取消

5打包vue3报错：（未解决）

正在上传…重新上传取消正在上传…重新上传取消