第一章 webpack与构建发展简史

为什么需要构建工具

  • 转换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'
    }
}