为什么需要构建工具

• 转换ES6语法
• 转换JSX
• CSS前缀补全/预处理器（less/scss）
• 压缩混淆
• 图片压缩

前端构建工具的演变之路

1. ant + YUI Tool
2. grunt
3. fis3, glup
4. rollup, webpack, parcel

为什么选择Webpack

• 发布时间：2012.3
• 社区丰富
• 配置灵活、插件多
• 官方更新速度快

初识Webpack

• 默认配置文件：webpack.config.js
• 可以通过webpack --config xxx设置配置文件

基础配置

module.export = {
    entry: './src/index.js',                        // 打包入口文件（零配置）
    output: './dist/main.js',                       // 打包出口文件（零配置）
    mode: 'production',                             // 环境
    module: {
        rules: [                                    // Loader配置
            {test: /\.txt$/, use: 'raw-loader'}
        ]
    }，
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html'            // 插件配置
        })
    ]
}

webpack初体验

前置条件：node.js（可通过nvm安装）, npm

创建工程文件夹

npm init
npm install webpack webpack-cli --save-dev
.\node_modules\.bin\webpack -v                      # 查看webpack版本

webpack脚本

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