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

脚手架是什么

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

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
目录结构展示

创建流程
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

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const vueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    //三种模式：none(不压缩) production(压缩，生产环境) development（不压缩，开发环境）
    mode:'production',
    //打包输出路径
    output:{
        path:path.resolve(__dirname,'../build'),
        filename:'bundle.min.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            //模版文件
            template:"public/index.html",
            //文件名
            filename:"index.html"
        }),
        new vueLoaderPlugin()
    ]
}

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、效果展示