webpack

一、初识webpack

1、什么是webpack?

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

2、webpack工作的方式

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件

3、作用

模块化：让我们可以把复杂的程序细化为小的文件;

打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。

转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化

和提升性能的责任。

二、webpack与gulp、Grunt的区别

webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具

三、webpack的打包流程

webpack是建立在module之上进行打包的

四、webpack基本配置

五、webpack4.0的安装

1、全局安装

cnpm install webpack webpack-cli -g

注意：不建议全局安装。

2、局部安装

npm init //初始化项目

cnpm install webpack webpack-cli -D // -D等价于–save-dev

3、webpack-cli的作用

    可以让我们在命令行中正确的使用webpack  以及npx webpack 等命令 如果不安            装则无法使用



4、文件编译

npx webpack index.js

5、npx

npx :会帮助我们在当前目录下面的node_modules包中找到webpack进行使用

npx webpack -v //查看webpack版本号

npx info webpack //查看webpack以往的一些版本号

npx webpack <文件名称> //文件编译

六、预热：文件编译

1、webpack默认是基于webpack.config.js进行打包的，如果需要指定其他文件名称

     进行打包可以按照如下这样书写

npx webpack --config <文件名称>

2、npm scripts

   如果在npm scripts中使用webpack的情况下会优先在工程目录下面的                               node_modules中找相关的依赖



    如果我们的编译命令过于复杂那么我们可以在package.json中的scripts中进行简化

    配置



{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}
    运行命令的时候只需要npm run <命令名称即可>



3、webpack打包环境

module.exports = {
    mode:"production" //生产环境
    model:"development"//开发环境
}



4、预热打包配置

1、npm init -y 生成一个node包

2、局部安装webpack

3、建立webpack.config.js

4、配置webpack.config文件

output:{
//占位符 满足线上地址的需求
publicPath:‘html://cdn.com/’
}

七、什么是开发环境、测试环境、生产环境

1、开发环境：项目尚且在编码阶段，我们的代码一般在开发环境中 不会在生产环

 境中，生产环境组成：操作系统 ，web服务器 ，语言环境。  php 。 数据库 等等



2：测试环境：项目完成测试，修改bug阶段



3：生产环境：项目数据前端后台已经跑通，部署在阿里云上之后，有客户使用，

访问，就是网站正式运行了。

三个环境也可以说是系统开发的三个阶段：开发->测试->上线

4：--save && --save-dev的区别

  可分别将依赖（插件）记录到package.json中的dependencies和                                  devDependencies    下面。



dependencies下记录的是项目在运行时必须依赖的插件，常见的例如react jquery         等即及时项目打包好了、上线了，这些也是需要用的，否则程序无法正常执行



devDependencies下记录的是项目在开发过程中使用的插件，一旦项目打包发布、          上线了之后，devDependencies中安装的东西就都没有用了



如果模块是在开发环境中使用，那么我们安装依赖的时候需要--dev

webpack 基本配置

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");//这个是做HTML的引入使用
const VueLoaderPlugin = require('vue-loader/lib/plugin')  //vue插件的引入，必须

//定义入口文件路径及出口文件路径
const PATH = {
    dev:path.join(__dirname,"./src/main.js"),
    build:path.join(__dirname,"./dist")
    //dev和build可以随意命名
}

//webpack的配置（导出一个对象）
module.exports = {
    mode:'development', //定义开发环境
    //入口配置
    entry:{
        app:PATH.dev    //APP也是随意取名的，看7行代码.
    },
    //出口配置
    output:{
        filename:"[name].js",   //打包出去后名称叫这个
        path:PATH.build   //出口路径，看8行代码
    },
    //配置loader  将浏览器不识别的一些语法转换为浏览器识别的一些语法
    module:{
        //规则
        rules:[    //rules是系统固定的，这里的一个对象就是一个规则
            {
                test:/\.(js)$/,  //每个对象都会有test，这句话是匹配后缀名为js的文件
                use:{
                    loader:"babel-loader", //通过babel-loader进行解析，上查？？？把ES6代码解析成为ES5代码，利于浏览器阅读
                    options:{
                        presets:["@babel/env"]  //这是一种配置规则，ES6转为ES5(需要安装这个依赖)
                    }
                }
            },
            {
                test:/\.(css|scss)$/,   //安装处理css 文件的
                //css loader执行的顺序  从右到左 从下到上
                use:["style-loader","css-loader","sass-loader"]
            },
            {   
                /*
                    当图片的大小小于2048的时候用url-loader做解析  
                    大于2048的时候用file-loader做解析 系统会自动去找file-loader
                         (在node-modules 文件夹内找)
                    url-loader:解析的时候会解析成base64的形式
                    file-loader会解析成原本的形式
                */
                test:/\.(jpg|png|gif)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:2048
                    }
                }
            },
            {
                test:/\.(woff|svg|eot|ttf|woff2)$/,
                use:["url-loader"]
            },
            {
                test:/\.vue$/,
                loader:"vue-loader"
            }
        ]
    },
    plugins:[   //这个是用来写插件的，使用任何都必须要new
        new htmlWebpackPlugin({
            filename:"index.html",   //打包后的文件名称
            template:"index.html",   //模板文件
            title:"Vue"          //titile
        }),
        new VueLoaderPlugin()  
    ],
    devServer:{  //当你打开页面的时候会自动打开浏览器
        open:true
    }
}