前端工程化工具webpack

webpack

• 前端工程化工具
  • grunt （2015）
    • 资源打包
    • 单元测试
  • gulp（2016 2018-4.0）
    • 流式操作工具
    • 资源打包
  • broserify（webpack的前身 只能解决js文件）
  • webpack（主流 3.0之后能解决除了js文件之外的文件 目前4.30.0）
    • 资源打包工具，比如：js文件打包压缩，img打包压缩。。
    • 可以解决模块化依赖问题
    • es6模块化
    • 缺点是只能转换js
• 前端的环境（有预设端口，每个环境的端口都不同）

  • 开发环境

  • 生产环境

  • 测试环境

  • 预发布环境

  • 上线环境

    • 开发环境 和 生产环境 都是由前端静态服务器来提供
    • 测试环境 本地客户端服务器提供
    • 预发布和上线环境是 nginx
• webpack概念
  • webpack是一种静态编译工具（预编译）
  • webpack指令：
    • webpack 把src目录下的文件打包到dest文件的main.js中 默认是product环境
    • webpack --mode development 开发者环境下的打包
  • webpack配置文件：
    • webpack.config.js（该文件是一个nodejs的模块化文件）（使用webpack时自动启动）

  单页面

  • 入口文件

entry: './src/index.js', //单文件

• 出口文件

//出口文件
// output:{path,****filename}path是出口目录的磁盘路径，filename指的是出口目录中文件的文件名
output: {
path: path.resolve(__dirname, 'dest'),
// filename: 'app_[hash:6].js' //或者main.js
filename: 'app.js'
// 文件名进行hash配置,[hash:6]表示配置哈希的6为字符
},

• 配置完成时有一个hash，是用来进行版本判断的
• 问题：为什么要跟hash

版本迭代的时候，不进行文件的覆盖（防止新版本出bug时无法追回之前版本）

• loader（转换器）
  - 将某一类型的文件转换成另一个类型的一个工具，我们常用loader来表示
  - 例如css文件

//装换器 loader
module: {
    rules: [{
        test: /\.css$/, //筛选所有css结尾的文件
    use: ['style-loader', 'css-loader']
    }]
},

多页面（多个入口文件）

module.exports({//多页面
    // 入口配置
    entry:{
        index:'./src/index.js',
        app:'./src/app.js'
    },
    //出口配置
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/[name]_[hash:6].js'//其中这里的name指的是入口中的key
    }
})

自动解决模块依赖问题

js文件module.exports 后在别的文件中 引入 require（“xx”）后就能使用了，无需其他操作

webpack-dev-server服务器的使用

• 安装 cnpm i webpack-dev-server -D（如果出现命令不存在就全局安装）
• 运行webpack-dev-server
  • 运行时的效果：
    • 默认端口：http://localhost:8080/
    • 会自动进行webpack打包（没看到有什么效果，依然要webpack命令）
  • 运行时额外加代码
    • –open 运行后自动打开页面
    • –port + 端口号 在这个端口下打开
    • –mode development 在上面环境下打开
    • 这些额外的代码也可以写到webpack.config.js这个配置文件中

devServer:{
            port:8080,
            open:true,
            mode:development
            hot:true //[ HMR] hot module replacement
            允许在运行时更新所有类型的模块，而无需完全刷新
        }

• 把运行命令放到package.json文件

“script”:{
        "dev":"webpack-dev-server --port 8080 --open"//可以和其他命令并行
       //"dev":"webpack && webpack-dev-server --port 8080 --open" //与webpack -w 并行会有问题，-w会一直执行，不会运行到后面的命令
    }

终端运行命令
    npm run dev

html 产出

html-webpack-plugin
安装：cnpm i html-webpack-plugin -D
使用：在webpack.config.js配置文件中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins:[
    new HtmlWebpackPlugin({
        filename:'index.html',//打包后的文件名
        template:'./index.html'//在当前文件中的相对路径
    })
]  //这样的话index.html中的文件引入就不用写了，**打包后的所有文件都会引入到index.html中**

//文件后缀可以省略
resolve:{//在webpack 4.0中已经默认可以省略js后缀
extensions:[’.js’,’.css’,’.vue’]
}