前端工程化-webpack/cli工具

为什么要前端工程化？

前端工程化是指将前端开发的流程规范化，标准化，包括开发流程，技术选型，代码规范，构建发布等，用于提升前端开发工程师的开发效率和代码质量。

如果是简单的单页面应用，使用gulp打包和同步工具实现开发全流程

webpack与grunt、gulp的不同？

Grunt、Gulp是基于任务运⾏的⼯具： 它们会⾃动执⾏指定的任务，就像流⽔线，grunt/gulp也被称为前端自动化任务管理工具，grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心

Webpack是基于模块化打包的⼯具: ⾃动化处理模块，把⼀切当成模块，当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图 (dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个 bundle。

webpack作用？

模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。
编译兼容。在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。
能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

webpack如何打包css，html这些文件，内部是如何

1）安装webpack
npm install webpack --save-dev
使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install webpack -g
2）创建项目
初始化项目 npm init，生成packet.json
3）打包后生成dist文件夹
执行 webpack src/index.js dist/bundle.js 后会编译index.js文件并且生成bundle.js文件
在index.html中就可以直接引入打包好的js文件了。

为了避免每次打包都写那么长的代码，在package.json文件夹中引入以下代码，在执行webpack的时候 可以用 npm run build代替

"scripts": {
   
  "build": "webpack"
}

为了避免每次打包的时候都写入口和出口参数，创建 webpack.config.js文件，配置参数

const path = require('path')
module.exports =  {
   
    entry: './src/index.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
}

打包HTML：
js文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
    mode:'development', // 开发模式
    entry: path.resolve(__dirname,'../src/main.js'),    // 入口文件
    output: {
   
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
    plugins:[
      new HtmlWebpackPlugin({
   
        template:path.resolve(__dirname,'../public/index.html')
      })
    ]
}

为了缓存，你会发现打包好的js文件的名称每次都不一样。webpack打包出来的js文件我们需要引入到html中，但是每次我们都手动修改js文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情
npm i -D html-webpack-plugin
plugins配置如上
new htmlWebpackPlugin打包HTML：自动生成一个index.html文件(可以指定模板来生成)，将打包的js文件，自动通过script标签插入到body中

打包CSS
入口文件是js，所以在入口文件中引入css文件
require(‘./css/normal.css’)
同时我们也需要一些loader来解析我们的css文件
npm i -D style-loader css-loader
npm i -D less less-loader
配置文件：

// webpack.config.js
module.exports = {
   
    // ...省略其他配置
    module:{
   
      rules:[
        {
   
          test:/\.css$/,
          use:['style-loader','css-loader'] // 从右向左解析原则
        },
        {
   
          test:/\.less$/,
          use:['style-loader','css-loader','less-loader'] // 从右向左解析原则
        }
      ]
    }
} 

打包文 图片
url-loader 一般与file-loader搭配使用，功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件移动到输出的目录中

前者用于处理小于8kb的图片，在编译图片过程中以代码显示，但是当图片大于8kb时，通过file-loader来加载, 此时在dist文件夹下生成了一个名字很长的图片，为了保证图片是被打