初识webpack（简易版）

webpack

概念

webpack 是一个前端资源加载/打包工具。它根据模块的****依赖关系进行静态分析，然后加个这些模块按照指定的规则生成对应的静态资源;

webpack 可将多种静态资源 js、css、less 转换成一个静态文件，减少页面请求；

安装

npm install -g webpack webpack-cli

前端模块化

• webpack 可对浏览器不能识别的语言(ES6、AMD、CMD、CommonJS)进行底层支持；
• webpack 可以帮助处理模块间的依赖关系；

打包

• 将 webpack 中的各种资源模块进行打包合并（bundle）
• 在打包过程中还可对资源进行处理，例如压缩图片、将scss转成css、将ES6转成ES5，将typescript转成javascript…

配置

• dist文件夹：由于存放打包之后的文件
• src文件夹：用于存放我们写的源文件
• main.js：项目的入口文件
• mathUtils：定义一些数学工具函数，可以在其他地方引用，并且使用
• index.html：浏览器打开展示的首页html（这里引用的是src内最终打包的文件即dist文件的内容）
• package.json：谈过 npm init 生成的，npm包管理的文件

webpack.config.js文件打包

const path = require('path') //'path'需要在node包里找到
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    }
}
// 通过npm init初始化，生成package.json文件

• entry 为打包的入口
• output 为打包的出口

package.json配置npm运行命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development"
}
// 执行npm run dev 执行项目打包

loader

css、less文件处理

• 在 src 目录中创建一个 css 文件
• 在 main.js 中引入该文件
• 安装对应 loader
• 在 webpack.config.js 中配置loader

main.js引入

require('./style.css')

安装 loader

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

webpack.confg.js

module: {
    rules: [
        {
            test: /\.less$/, //打包规则应用到以css结尾的文件
            ues: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "less-loader" }
            ] 
            //style-loader需要放在css-loader的前面
        }
    ]
} 

图片处理

在webpack.config.js中添加一个rules选项，用于处理图片文件，当文件大于设置的 limit 值，需要使用 file-loader 模块进行加载，小于则转成base64格式

安装file-loader

npm install --save-dev file-loader

    module: {
        rules: [
            {
                test: /\.(png|jpg|jepg|gif)$/, //打包规则应用到以图片格式结尾的文件
                ues: [
                    loader: 'url-loader',
                    options: {
                        limit: 8196
                    }
                ]
            }
        ]
    } 

• 打包后发现webpack会自动生成一个很长的名字（32位的hash值，为防止名字重复）
• 实际开发中对图片名字有要求，可通过options选项配置

  limit：图片文件根据大小转换的界值
  img：文件要打包到的文件夹
  name：获取图片原来的名字，放在该位置
  hash8：为防止图片名称冲突，依然使用hash但只保留8位
  ext：使用图片原来的扩展名

• 配置修改图片使用的路径

    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
  

ES6转ES5的babel

安装

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置webpack.config.js

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options:{
                    presets: ['es2015']
                }
            }
        }
    ]
}

plugin

概述：plugin通常用于对某个现有的架构进行扩展的插件。

webpack中的插件就是对webpack现有功能的扩展，比如打包优化、文件压缩等

• loder 和 plugin 的区别

loder：主要用于转化某些类型的模块，是个转化器
plugin：是对webpack本身的扩展，是一个扩展器、插件

• plugin 的使用

1. 通过npm安装需要使用的plugins
2. 在webpack.config.js中配置插件

例如添加为打包的文件添加版权声明的插件BannerPlugin:

    module: {
        plugins: [
            new webpack.BannerPlugin('最终版权归code-zl所属')
        ]
    }