初步开始学习认识 webpack

初步开始学习认识 webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：(本文档旨在给出webpack的入门)

• 入口 ------ (entry) 打包文件的入口（对应上述默认入口src/index.js），支持多入口
• 输出 ------ (output) 打包压缩文件后的输出位置
• 加载器 ---- (loader) 针对对应文件进行转义，解析 成浏览器识别的文件
• 插件 ------ (plugins) 插件目的在于解决 loader 无法实现的其他事。

//通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
//node内置path模块，该模块主要集成文件系统路径操作API
const path = require('path');    
const config = {
    //webpack打包的模式，也可以在本配置中配置
    mode: 'development',        
    //js的入口文件，支持多入口 资料1
    entry: {   
        main: path.resolve(__dirname,'../src/index.js')
    },
    //js打包压缩后的出口文件，多入口时对应的配置应做相对变化 资料2
    output: {  
        path: path.resolve(__dirname,'../dist'),
        filename:'bundle.js'
    },
    module: {
        // 配置loder使用的规则、作用范围、控制输出的名称、位置等；主要作用是编译，解析文件； 暂时不使用loader
        rules: [] 
    },
    plugins: [
        //根据项目提供HTML模板，生成新页面，并将对应的输出打包压缩输出的js，链接到页面中；详细配置见 资料3
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
};
module.exports = config;

资料1 资料2 资料3

先说到这 拜了个拜