第一个vue程序、webpack的使用

首先我们先要下载一个node.js,我们可以从官网上进行下载，安装完成之后我们可以在cmd中查看他们的版本，
现在我们给他添加一个国内的镜像，这就相当于maven中我们添加的镜像，

npm install cnpm -g

现在我们需要在这基础上添加一个框架vue-cli相当于，我们maven在创建的时候使用骨架中那些模块进行创建。
-g使用全局变量的意思

cnpm install vue-cli -g

安装完成之后我们可以查看一下，我们添加的模块

vue-list

我们可以在自己相对应的文件夹中找到安装的骨架

npm进行打包
这里的参数-y 代表的都是默认

npm init -y

npm

npm 主要是就是类似与java的中的maven对依赖进行管理，而npm主要是用于管理下载json文件。

我们可以看我们刚才从npm install jquery,会在package.json里的deoendencies 添加jquery及版本号

如果我们自己进行修改版本修改后我们只需要
npm install 重新加载一下就可以了

创建

开始创建第一个项目，使用命令行进行创建 我们这里使用的骨架是webpack进行创建的

vue init webpack myvue

他会弹出一些指令，第一次我们是创建一个空的项目 不添加任何操作，后续我们会跟据自己是情况来进行添加。

我们cd 进入我们刚创建好的文件夹中 进行npm 的安装

npm install

我们在文件夹中可以看到这样的一个结构

webpack的使用

我们可以去他的官网上去进行深入的学习，首先是我们需要先进行安装webpack

npm install webpack -g

同时安装他的脚手架

npm install webpack-cli -g

本质上webpack是一个JavaScript的静态模块打包工具。
核心概念

在开始前你需要先理解一些核心概念：

入口(entry)
输出(output)
loader
插件(plugin)
模式(mode)
浏览器兼容性(browser compatibility)
环境(environment)
本文档旨在给出这些概念的高度概述，同时提供具体概念的详尽相关用例的链接。

为了更好地理解模块打包工具背后的理念，以及在底层它们是如何运作的，请参考以下资源：

手动打包一个应用程序
实时创建一个简单打包工具
一个简单打包工具的详细说明

我们需要在webpack.config.js 中书写这些配置文件

具体使用
output

output: {
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 自定义非入口chunk的名称
    //library 一般是结合dll使用
    // library: '[name]', // 整个库向外暴露的变量名
    // libraryTarget: 'window' // 变量名添加到哪个全局上，browser浏览器端添加到window上
    // libraryTarget: 'global' // 变量名添加到哪个全局上，node服务端添加到global上
    // libraryTarget: 'commonjs'
  },

module

module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 多个loader用use
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查 src 下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        enforce: 'pre',
        // 延后执行
        // enforce: 'post',
        // 单个loader用loader
        loader: 'eslint-loader',
        options: {}
      },
      {
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
  },

resolve

// 解析模块的规则
  resolve: {
    // 配置解析模块路径别名: 优点 简写路径 缺点 写路径时没有提示
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件路径的后缀名，引用文件时，后缀名就可以省略了
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 告诉 webpack 解析模块是去找哪个目录,下面这样配置之后，可以直接按照路径找到node_modules,不用再挨个遍历了
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  }

devServer

devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示~
    overlay: false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {//浏览器与服务器之间存在跨域问题，但与代理服务器之间不存在跨域，代理服务器与服务器之间也不存在跨域，所以，发送到代理服务器，再由它转发到服务器，可以避免跨域
      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

optimization

 optimization: {
    splitChunks: {
      chunks: 'all'
      // 默认值，可以不写~
      /* minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSiza: 0, // 最大没有限制
      minChunks: 1, // 要提取的chunk最少被引用1次
      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
      maxInitialRequests: 3, // 入口js文件最大并行请求数量
      automaticNameDelimiter: '~', // 名称连接符
      name: true, // 可以使用命名规则
      cacheGroups: {
        // 分割chunk的组
        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
        // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10
        },
        default: {
          // 要提取的chunk最少被引用2次
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        } 
      }*/
    },
    // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
    // 解决：修改a文件导致b文件的contenthash变化
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    },
    minimizer: [
      // 配置生产环境的压缩方案：js和css
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动source-map
        sourceMap: true
      })
    ]
  }

创建项目

首先是我们创建一个空项目，然后在空项目中创建一个模块moudules,我们在这个里面显示创建一个hello.js文件，在这当中导出 exports一个函数

exports.sayHi = function (){
    document.write(" <h1>阿威</h1>");
}

现在我们在创建一个main.js文件，用require进行引入我们刚才导出的文件，然后调用定义的方法

var hello=require("./hello");
hello.sayHi();

我们项目文件下创建一个webpack.config,js文件，我们在这里面只写了一个入口文件entry，出口文件output

module.exports= {
    entry:'./moudules/main.js',
    output: {
        filename:"./js/bundle.js"
    }
};

然后我们在管理员进入cmd 进入到当前项目中 输入webpack命令

webpack

此时他就会在你刚才写的出口中生成一个相对应的文件，这里面是打包好的文件。

!function(){var r={880:function(r,t){t.sayHi=function(){document.write(" <h1>阿威</h1>")}}},t={};(function n(o){var i=t[o];if(void 0!==i)return i.exports;var e=t[o]={exports:{}};return r[o](e,e.exports,n),e.exports})(880).sayHi()}();

我们在项目的文件下面建一个index.html文件，访问他就会在页面显示我们在导出方法中定义的内容。

这是我们整个项目的结构

est5 es6 方法的导入与导出

es5

// es5方法的导出
exports.add=function(a,b){
    return a+b
}

es6

let str=str=>{
    document.write(str);
}
export default str;

export default{
    save(str){
        console.log(str)
    },
    del(str){
        console.log(str)
    }
}

方法引入

import common from "./common"
import utils from "./utils"

common("es6函数的用法")
utils.save("一次导出多个函数的用法")
utils.del("del")

//es5方法的引入
let sum =require("./add")
common(sum.add(1,2));

webpack.config.js

const path=require("path")
module.exports = {
    entry: './src/main.js',//打包文件的入口
    output: { 
        path: path.resolve(__dirname, 'dist'),//2.修改output对象的path属性 __dirname表示当前目录
        filename: 'bundle.js'//输出的文件名字
    }
}

终端进行打包 这里指定了他们的mode

PS E:\WEB\work\dmeo3> webpack --mode=development
asset bundle.js 5.5 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 436 bytes
  ./src/main.js 211 bytes [built] [code generated]
  ./src/common.js 64 bytes [built] [code generated]
  ./src/utils.js 116 bytes [built] [code generated]
  ./src/add.js 45 bytes [built] [code generated]
webpack 5.25.1 compiled successfully in 90 ms

打包css静态文件
安装样式

npm install style-loader css-loader --save-dev

在webpack.config.js 添加module

 module:{
        rules:[
            {
                //使用正则表达式,匹配以.css结尾的文件
                test: /\.css$/,
                //顺序不能颠倒
                use: ['style-loader','css-loader']
            }
        ]
    }

style

body{
    background-color: rebeccapurple;
}

main中引入

import "./style.css"

在中端进行执行

webpack --mode=development