webpack小计

Webpack

webpack 是什么

本质上 webpack 是一个模块打包器(module bundler)

webpack 中的重要概念

1. 入口 entry

   指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始

   /* src/style.css */
   #title{color: red;}
   

   // src/app.js
   import './style.css'
   

   // webpack.config.js
   
   module.exports = {
       entry: './src/app.js'
   }
   
   // entry 指明从 src 目录下的 app.js 文件开始寻找依赖关系，发现 app.js 中引入了 style.css，建立依赖图
   

2. 出口 output

   告诉 webpack 在哪里输出它所打包的 bundles，以及如何命名

   // webpack.config.js
   const {resolve} = require('path')
   
   module.exports = {
       entry: './src/app.js',
       output: {
           // 文件名
           filename: 'built.js',
           // resolve 是模块 path 中的绝对路径拼接函数，__dirname 是当前文件所在绝对路径
           path: resolve(__dirname, 'build')
       }
   }
   

3. loader

   webpack 只能打包 js / json 类型的文件，无法处理其他类型的文件，为了能处理其他类型的文件，需要使用 loader，loader 一般需要下载之后再使用

   // webpack.config.js
   const {resolve} = require('path')
   
   module.exports = {
       entry: './src/app.js',
       output: {
           filename: 'built.js',
           path: resolve(__dirname, 'build')
       },
       module: {
           // 每一个 loader 都写在 rules 数组中
           rules: [
               {
                   // test 为正则表达式，一般匹配对应文件类型
                   test: /\.css$/,
                   // use 中写入了需要使用的 loader
                   use: ['style-loader', 'css-loader']
               }
           ]
       }
   }
   

4. 插件 plugins

   注：不熟悉，先写个用法在这里

   // webpack.config.js
   const {resolve} = require('path')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
       entry: './src/app.js',
       output: {
           filename: 'built.js',
           path: resolve(__dirname, 'build')
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './src/index.html'
           })
       ]
   }
   

5. 模式 mode

   // webpack.config.js
   const {resolve} = require('path')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
       entry: './src/app.js',
       output: {
           filename: 'built.js',
           path: resolve(__dirname, 'build')
       },
       mode: 'development',   // 开发环境
       // mode: 'production'   // 生产环境
   }
   

webpack 打包资源

打包样式资源

// webpack.config.js
const {resolve} = require('path')

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        // 每一个 loader 都写在 rules 数组中
        rules: [
            {
                // test 为正则表达式，一般匹配对应文件类型
                test: /\.css$/,
                // use 中写入了需要使用的 loader
                use: ['style-loader', 'css-loader']
            },
            
            // 若打包 less sass 等，还需下载 less-loader
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}

打包 html 资源

使用插件 HtmlWebpackPlgins

// webpack.config.js
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

打包图片资源

// webpack.config.js
const {resolve} = require('path')


module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 直接打包有 bug，无法处理 html 页面结构中引入的 img  
                // 注：要同时下载 file-loader
                test: /\.(jpg|png|gif|jpeg)$/,
                use: 'url-loader',
                options: {
                    // 小于 8 * 1024 的图片会被编码为 base64 格式的字符串(经常看见有的背景图是一长串的那种)
                    limit: 8 * 1024,
                    esModule: false, // 关闭 url-loader 的 es6 模块化，使用 common.js 解析
                    name: '[hash:10].[ext]'	// 命名, 取前10位哈希值，文件扩展名不变
                }
            },
            // 页面中的 img 标签中引入的 图片 要使用 html-loader 解析
            {
                test: /\.html$/,
                loader: 'html-loader' // 只有一个 loader 可以直接写
            }
        ]
    }
}

打包其他资源（如阿里矢量图标）

// webpack.config.js
const {resolve} = require('path')


module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 使用 exclude 排除
                exclude: /\.(jpg|png|gif|jpeg|css|less|js|html|json)$/,
                use: 'file-loader',
            },
            
        ]
    }
}