使用webpack自己构建vue开发环境

古城微笑少年丶 2022-11-27 10:28 270阅读 0赞

## 脚手架是什么 ##

一套项目的主体结构，包括开发过程中用到的工具、环境配置、模块划分等  
主体结构全部搭建好了，我们可以利用这个主体结构直接去开发，完成我们的需求，而不用花时间再去配置项目需要用到的东西

## vue-cli是什么 ##

一个下载器（启动器），根据不同的配置，下载git上的一个vue目录，帮助我们快速的构建一个项目  
我们所看到运行、打包等功能其实是webpack在起作用，真正重要的是loader  
webpack文件本身是不认识vue文件的，所以需要各种各样的loader将不同的文件转化为webpack可识别的js文件，各种plugin是为了扩展功能

vue-cli3.x学习了rollup（零配置思路），所以在项目初始化之后，没有了之前的那些配置文件。这是因为vue-cli3帮我们解决了绝大部分的webpack配置

## 注意 ##

不建议全局安装webpack，因为不同项目内部依赖的webpack版本可能不同，全局安装之后可能存在冲突

## 使用webpack搭建脚手架，构建一个vue开发环境 ##

git地址：https://github.com/zhangstar1331/my\_vue\_cli  
**目录结构展示**  
![在这里插入图片描述][20200815134111276.png_pic_center]

**创建流程**  
**1、创建文件夹my\_vue\_cli**  
**2、生成package.json工程管理文件**

npm init -y

**3、项目中引入vue文件**

npm install vue

**4、项目中引入webpack**

npm install webpack webpack-cli
    webpack-cli是一个简易客户端，用来与webpack协议连接

**5、项目中引入所需的loader，将webpack不能识别的文件类型转为能够识别的js文件**

npm install vue-html-loader //解析vue2.0组件里的template
    npm install vue-loader //解析vue组件
    npm install vue-template-compiler //编译器，把vue里的东西分别编译为html，js，css
    npm install css-loader //处理 import / require（） @import / url 引入的内容，解析css
    npm install style-loader//通过一个JS脚本创建一个style标签，里面包含一些样式。不能够单独使用

**6、创建web服务**  
每次更新都需要重新打包一次，很麻烦  
我们可以借助webpack-dev-server，用于开发调试，提供web服务、热更新、接口代理等等  
打开web服务

npx webpack-dev-server

webpack-dev-server打包后的js文件是在内存里维护的，所以只需要将index.html中引入的打包js路径改为根目录即可实现热更新。  
注意：  
这可能存在一个问题，内存里维护的文件，服务器重启，内存里的数据就没了。所以生产无法直接使用，生产还是需要打包一个js文件放在服务器上，而开发的时候可以这样使用。这也就是webpack中开发和生产两种模式存在的意义。  
**7、下载html-webpack-plugin用于打包html文件**  
因为开发用的bundle.js是内存下面的，引入直接用根目录。生产引入需要将目录改为build下。每次更改比较麻烦，所以可以将index.html也直接打包，自动引入js文件。

npm install html-webpack-plugin

**8、配置不同文件区分开发环境和生产环境**  
创建config目录，里面新增开发和生产的配置文件

|--config
    	|--webpack.development.js
    	|--webpack.production.js

webpack.development.js

const htmlWebpackPlugin = require('html-webpack-plugin');
    const vueLoaderPlugin = require('vue-loader/lib/plugin');
    module.exports = { 
        //开发模式，在内存里维护，不需要压缩和生成打包文件
        mode:"development",
        output:{ 
            filename:"bundle.js"
        },
        plugins:[
            new htmlWebpackPlugin({ 
                //模版文件
                template:"public/index.html",
                //文件名
                filename:"index.html"
            }),
            new vueLoaderPlugin()
        ]
    }

webpack.production.js

webpack.config.js中，可以根据参数传入，判断命令行中传入的是什么命令，进而判断是开发命令还是生产命令，执行不同的语句  
webpack.config.js

module.exports = (env) => { //env可以接收到命令行中传入的参数，进而去识别是开发或生产语句
        env = env || { };
        return { 
            entry:'./src/main.js',
            module:{ 
                rules:[
                    //处理vue结尾的文件
                    { test:/\.vue$/,use:"vue-loader"},
                    //这里使用的是compose组合函数，读取为从右往左。如果是pipe函数则是从左往右
                    //即先执行css-loader解析css，然后再去执行style-loader解析成css规则
                    { test:/\.css$/,use:["style-loader","css-loader"]}
                ]
            },
            resolve:{ 
                //默认扩展名
                extensions:['.js','.json','.vue'],
                alias:{ 
                    vue:'vue/dist/vue.esm'
                }
            },
            //执行不同的配置文件，扩展运算符去拷贝内容，简单对象深拷贝，复杂对象浅拷贝
            ...（env.development ? require('./config/webpack.development'):require('./config/webpack.production')）
        }
    }

package.json的scripts中创建命令

"scripts": { 
        "dev":"webpack-dev-server --env.development --open",//开发
        "build":"webpack --env.production"//生产
      }

命令行中直接执行

npm run dev
    npm run build

webpack本地安装，可以通过npx webpack去执行webpack  
**9、效果展示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]

[20200815134111276.png_pic_center]: /images/20221124/3a71718f7821463eac1f171bd4681a6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/8136d2c7b2a64cebaa6129249b4d49e2.png