以往的模块打包流程（分两次打包）

babel打包(es6 → es5 模块语法 → CJS) + 2. browserify(CJS → es5)

webpack（基于Node的全自动化打包）

webpack的五个核心概念

入口(entry)：指示webpack应该使用哪个模块,来作为构建其内部依赖的开始
输出(output)：在哪里输出文件，以及如何命名这些文件
Loader：类似于简单版插件，处理那些非JavaScript文件(webpack自身只能解析JavaScript和json)
插件(plugins)：执行范围更广的任务，从打包到优化都可以实现
模式(mode)：有生产模式production和开发模式development

webpack配置文件

module.exports = {
    entry: '',
    output: {},
    module: {
        rules: [] // 配置Loader
    },
    plugins: [], // 配置plugin
    mode: ''
}

文件命名

源代码 → src
主文件（入口） → src > js > app.js / main.js / index.js（汇总处理文件：模块/js/json/css/less等）
模块 → src > js > module.js
页面 → src > js > index.html
打包后（输出） → build / dist > js > app.js / main.js / index.js（处理后的文件）

文件结构

project
│   package.json
│   webpack.config.js
└───build
│   │   index.html
│   └───imgs
│   └───js
│   │   app.js
│   └───CSS
└───src
│   └───js 
│   │    app.js
│   │    index.html
│   └───CSS
│   └───imgs
│   └───json
└───node_modules

打包后的去向：
src: js+json+css → build: js

流程方法A：

安装：

npm install webpack@4 webpack-cli@3 -g // 全局安装，作为指令使用（cli命令行工具版本需要对应高一级的webpack版本！）

npm install webpack@4 webpack-cli@3 -D // 本地安装,作为本地依赖使用（防止Loader出错）

打包：

C:\webpack>webpack ./src/js/app.js -o ./build/js/app.js --mode=development // -o 输出

index.html引入：

<script type="text/javascript" src="../build/js/app.js"></script>

特征

webpack能够编译打包js和json文件（默认暴露引入：import data from './json/test.json'）
能将es6的模块化语法转换成浏览器能识别的语法
能压缩代码
不能编译打包css、img等文件
不能将js的es6基本语法转化为es5以下语法
需使用webpack配置文件解决，自定义功能

流程方法B：（利用webpack配置文件打包）

引入配置文件：

webpack --config ./file.js

或将配置文件名设置为webpack.config.js

webpack

配置文件内容：

/*
    1.该文件是webpack的配置文件，所有webpack的任务、用到的loader，plugins都要配置在此
    2.该文件要符合CJS模块化规范
*/
// 引入Node中一个内置的path模块，用于解决路径问题
var path = require('path');
// 使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
    mode: 'development', // 工作模式：开发或生产环境
    entry: './src/js/app.js', // 入口
    // 出口
    output: {
        path: path.resolve(__dirname, 'build/js'), // 输出文件的路径
        filename: 'app.js' // 输出文件的名字
    },
    module: {
        rules: [
            {} // 配置的Loader
        ]
    }
};

配置Loader解析css，less，样式img等文件

初始化包管理工具（与webpack.config.js文件同级）

npm init --yes // 默认配置

【安装Loader包css-loader】

npm install --save css-loader -D
npm install --save style-loader -D

app.js引入css

import css from 'file.css'
// 或
import 'file.css'

添加Loader

rules: [
    {
    test: /\.css$/, // 该Loader要处理的文件
    use:[
        {loader: 'style-loader'}, // 创建style标签，将样式资源插入，添加到head中生效
        {loader: 'css-loader'} // 将css文件变为common js模块加载到js中，里面内容是样式字符串
    ]
    }
]

打包（混入在app.js文件中，需提取为css文件）

webpack

【安装Loader包file-loader/url-loader处理样式img】

module: {
    rules: [
        // 配置解析css
        {...},
        // 配置解析less
        {...},
        // 配置解析样式中的图片
        {
            test: /\.(png|jpg|gif|bmp)$/,
            use: [{
                loader: 'file-loader', // url-loader
                options:{
                    outputPath: '/imgs', // 配置图片加工后存放的位置🔺
                    publicPath: '/build/img/', // 配置图片引入时的路径前缀
                    // 图片生成时的文件名 哈希值取前五位+[ext]：保持源文件后缀
                    name: '[hash:5].[ext]',
                    // limit: 8 * 1024
                    // url-loader转码：图片大小，小于8KB时，将图片转为base64编码（节省url请求次数以及占用内存）

                }
            }]
        }
    ]
}

【安装Loader包html-loader处理html中的img】

//配置解析html中的图片<img>
{
    test: /\.(html)$/, 
    use: ['html-loader'] // 简写形式
}

【安装Loader包file-loader处理其他资源】

// 配置解析字体文件
{
    exclude: /\.(html|less|css|png|jpg|bmp|js|gif|json)$/,
    use: [{
            loader: 'file-loader',
            options: {
            outputPath: 'media', // 配置图片加工后存放的位置
            name: '[hash:5].[ext]', // 配置生成图片的名字+后缀
         }]
}

配置Plugin解析html文件

安装

npm install --save-dev html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin'); // plugin需要引入
var path = require('path');

module.exports = {
    mode: 'development', // 工作模式：开发或生产环境
    entry: './src/js/app.js', // 入口
    // 出口
    output: {
        path: path.resolve(__dirname, 'build'), // 输出基础路径🔺
        filename: 'js/app.js' // 输出js文件的名字（版本5：'/js/app.js'）🔺
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html' // 模板的位置
        }),
    ] // plugin需要实例化
};

自动化实时更新打包：dev-serve（修改代码后无需手动webpack）

安装

npm webpack-dev-serve -g // 带有指令集，全局安装

npm webpack-dev-serve -D // 局部安装

配置

module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {...},
    module: {...},
    plugins: [...],
    devServer: {
        port: 5000, // 开启服务器端口号
        open: ture, // 自动打开浏览器
        hot: true // 模块热更新/热模替换（局部更新）
    }
};

打包（build文件生成于内存）

webpack-dev-serve

配置快捷短指令

npm run xxx的时候，首先会去项目的package.json文件里找scripts里找对应的xxx，然后执行xxx的命令
package.json>

"scripts": {
    "start": "webpack-dev-server"
}

这样配置以后webpack开启服务器就可以使用npm run start指令代替webpack-dev-server啦
当快捷指令命名为start时，可以省略run

npm start
// 或
npm run start

提取css为单独文件

上文中css打包后混入到了app.js中，现在改为使用以下方法提取css

npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: '/css/index.css // 配置输出
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPluginloader, 'css-loader'],
            },
        ]
    },
};

生成结构：build>css>index.css

16.webpack构建工具（模块打包器）