美文网首页React随笔
webpack打包工具

webpack打包工具

作者: 简约酒馆 | 来源:发表于2019-11-17 17:27 被阅读0次

webpack中文文档地址:https://www.webpackjs.com/

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

安装webpack环境

1.安装  node.js     (webpack基于node.js开发出来的一个前端工具)

2.创建一个文件夹

3.创建配置文件  package.json         (npm   init   -y)

4.下载模块  cnpm  install  webpack    webpack-cli   --save-dev

5.创建一个配置文件  webpack.config.js

const path=require("path");    //webpack需要使用绝对路径

module.exports={

        entry:"./js/index.js",     //entry(入口)   文件路径

        output:{                  //output(输出)

                path:path.resolve(__dirname,"dist"),      //数据路径

                filename:"my-webpack.js"                    //输出的文件名

        }

};

webpack的四个核心概念

入口(entry)    从哪里开始打包

出口 (output)  打包后的文件存到哪里

加载器(loader) 导入非js文件

插件(plugins)  增加webpack功能

相关文章

  • 02-02.Webpack - 模块打包工具

    Webpack - 模块打包工具 At its core, webpack is a static module ...

  • webpack简单使用

    一、webpack简介 1.webpack是什么 webpack项目打包工具,项目构建工具 2.webpack有什...

  • webpack

    webpack定义:模块打包工具

  • webpack初始(1)

    1. 简介 webpack(模块打包工具):webpack是一个打包模块化的Javascript的工具,它会 从入...

  • Webpack 4 新手入门教程,全面讲解

    什么是webpack? 说白了webpack只是一个打包工具,在webpack之前就已经有很多打包工具了,比如Gu...

  • webpack学习笔记

    关于webpack webpack是一个针对 JavaScript 的打包工具 ===》模块打包器(module...

  • webpack 中的哪些常见概念

    webpack 打包工具与 gulp、grunt的区别: 虽然这三个都是打包工具,但是webpack是一个模块,它...

  • 002手动配置webpack的记录

    与webpack有类似功能的工具grunt/gulp1webpack 是什么?打包工具(WebPack可以看做是模...

  • webpack详解

    webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...

  • Webpack打包工具

    webpack文档、webpack优质文章 webpack打包工具,基于node环境。将CSS、Sass、Less...

网友评论

    本文标题:webpack打包工具

    本文链接:https://www.haomeiwen.com/subject/mvduictx.html