模块化打包工具webpack

1.模块回顾

模块化为了解决什么？

主要是为了解决变量污染的问题，以及便于维护，以及重用

什么是模块？模块化？

模块：拥有独立功能的部分
模块化：将系统分离成多个独立功能部分的 方法

模块化规范

CommonJS规范 （同步模块规范）

1. 每个文件就是一个独立的模块，其内部所有变量私有化，对外不可见
2. 使用module.exports进行内部资源暴露
   var name = '张三'
   module.exports.name = name
3. 使用require进行模块加载
   require('./模块路径')
   每次require就是require一个模块的exports对象

• require('axios') 不写./ 加载的就是node_modules的核心模块（先找项目内的，在找全局的）
• require('./xxx') 如果./ 打头，则表示加载相对路径

同步模块化规范，适用于服务器端，不适用于浏览器端（因为浏览器都是异步加载）

• 实现者：nodeJS

AMD (异步模块规范)

1. 使用define定义模块(function内的就是一个独立的模块)

        define(function(){
            //模块内容
            var name = '张三'
        })

2. 使用return，来进行暴露

        define(function(){
            //模块内容
            var name = '张三'
            var age = 20
            return {
                name,
                age
            } //使用return来暴露
        })

3. 使用require来引入模块

• 实现者：requireJS

CMD (异步通用模块规范)

1. 使用define函数来定义模块
2. 使用module.exports进行模块暴露
3. 使用require来引入模块

• 实现者：seaJS

经典面试题

请简述AMD CMD COMMONJS的区别？

• COMMONJS是同步，适用于服务器端
• AMD CMD是异步，适用于浏览器端
• AMD依赖前置，CMD依赖就近

ES6模块化规范

1. 一个文件就是一个独立的模块
2. 暴露
   export xxx
3. 引入
   import xxx from '路径'

//ES6写法

两种暴露方式

• 方式一：直接在变量或者函数前面增加export
• 方式二：使用export default 统一暴露

方式一

    export var name = '张三'
    export function sayHi(){
        console.log(name)
    }
    //加载，加载方式一需要使用解构（只能使用结构进行加载）
    //b.js 加载a
    import { name, sayHi } from './a.js'

方式二

var name = '张三'

function sayHi(){
    console.log(name)
}

export default {
    name,
    sayHi
}
//加载，加载是直接加载default后面的对象，所以无需结构
import aaa from './a.js'
aaa.name
aaa.sayHi()

2.Webpack 介绍

3.Webpack 安装

1. 全局安装webpack命令行工具

yarn global add webpack@3.8.1

2. 在项目内局部安装webpack依赖

yarn add webpack@3.8.1

3. 书写webpack.config.js配置文件

var path = require('path')

module.exports = {
    //入口JS文件
    entry: './src/a',
    //出口
    output: {
        //输出绝对路径
        path: path.resolve(__dirname,"dist/"),
        //输出文件名
        filename: 'bundle.js'
    }
}

//打包文件
//直接使用webpack命令进行打包！

4. 如果要开启观察者

module.exports = {
    ...
    //观察者(检测文件变化，进行自动打包)
    watch: true
}

4.Webpack入门

webpack

5.Webpack配置文件

var path= require('path');
var webpack = require('webpack');   //要使用插件，请记住一定引入webpack模块
/* webpack配置对象 */
module.exports = {
    //入口文件
    // entry: "./src/a",    //单入口，一个字符串地址 (单入单出)
    // entry: ["./src/a.js", "./src/c.js"],    //多入口，一个数组 （多入单出）
    entry: {
        // key输出的文件名: value要打包的入口文件
        aa: "./src/a.js",
        cc: "./src/c.js"
    },  //多入多出
    
    //配置输出
    output:{
        //输出的路径（硬盘路径） 使用webpack就是读取此path
        path:path.resolve(__dirname,"dist/"), // 目录，V2.0+
        //输出的文件名
        filename:"[name].js",   //[name]是webpack自己的变量！！可以解析多入口的key

        //配置服务器输出的虚拟路径（输出到内存里的路径） 使用webpack-dev-server就是读取此path
        publicPath: "/dist/",

        //异步模块自定义名称属性
        chunkFilename: "[name].js"
    },

    //loaders配置
    module: {
        //加载器规则配置
        rules: [
            //加载器对象
            //css加载器
            {
                test: /\.css$/, //匹配规则，正则表达式
                use: ['style-loader', 'css-loader']   //使用哪种加载器加载
                //use数组内执行顺序是从右到左
            },
            //less加载器
            {
                test: /\.less$/,
                use: [{
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },

            //图片加载器
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192   //大小限制8k，如果大于此限制，会自动转化为file-loader
                    }
                  }
                ]
              }
        ]
    },


    //所有插件配置的地方
    plugins: [
        // new webpack.BannerPlugin("作者：0927"), //添加注释
        // //压缩插件
        // new webpack.optimize.UglifyJsPlugin({
        //  //去掉所有注释
        //  comments:false,
        //  //抑制警告
        //  compress:{
        //      warnings:false
        //  }
        // }),
        // 提取公共模块到单独的文件(参数就是公共模块的文件名)
        // new webpack.optimize.CommonsChunkPlugin('common')
    ]


    //观察者(检测文件变化，进行自动打包)
    // watch: true
}

webpack可以对文件进行模块化打包，可以单入单出，多入单出，还可以多入多出

单入单出：

entry: './src/a'    //一个字符串的单入口

output: {
    path: xxx
    publicPath: xxx
    filename: 'bundle.js'   //单出口
}

多入单出：

entry: ['./src/a', './src/c']    //数组控制多个入口

output: {
    path: xxx
    publicPath: xxx
    filename: 'bundle.js'   //单出口
}

多入多出（注意需要修改出口）：

entry: {
    key(输出模块的名字): value(入口文件路径)
    abundle: './src/a',
    cbundle: './src/c',
    .....
}

output: {
    path: xxx
    publicPath: xxx
    filename: '[name].js'   //[name]是webpack的变量，会自动获取多入口的key作为文件名
}

6.Loader模块加载器

使用步骤

1. 确定我要加载的模块类型，到官网寻找对应的loader

(比如，要加载CSS或者加载图片)
https://www.webpackjs.com/loaders/

2. 下载安装对应loader

yarn add css-loader style-loader -D

3. 配置loader的规则

所有的loader都配置在webpack.config.js里

    module.exports = {
        ...

        module: {
            rules: [
                {
                    //具体的加载规则,
                    test: 匹配的规则,正则表达式
                    use: 使用哪种类型的加载器，顺序从右到左
                },

                {
                    test: /\.less$/
                    use: ['style-loader','css-loader','less-loader']

                },
            ]
        }

    }

图片加载的加载器有两个

1. url-loader：会直接把图片打包进JS模块内，适用于小图片（limit配置大小）
2. file-loader：会把图片单独打包到输出文件夹内

当配置了url-loader,图片大于8kb时，会自动使用file-loader,但是不需要再配置，只需要下载即可

7.Webpack-dev-server(服务器)

1.全局安装

yarn global add webpack-dev-server@2.9.4

2.本地安装

yarn add webpack-dev-server@2.9.4 

8.Webpack插件

9.Webpack异步模块