webpack学习笔记

Towers 发布于2019-08-19 18:14 / 2635人阅读

摘要：是流行的资源打包工具，属于前端工作流的一部分。简单说，它牛逼的地方就是把一切静态资源打包在一个文件，并且有一堆的插件。安装把安装到项目依赖安装到项目。要工作，依赖于一个的配置文件。

1、webpack是流行的资源打包工具，属于前端workflow（工作流）的一部分。

简单说，它牛逼的地方就是把一切静态资源打包在一个文件，并且有一堆的插件。

2、安装webpack

把webpack安装到项目依赖
npm install webpack --save-dev 安装到项目。

3、webpack要工作，依赖于一个webpack.config.js的配置文件。

module.exports={        //node.js的模块输出标准格式
    entry: "./main.js",     //entry是入口文件,是程序的入口文件的相对地址
    output: {               //打包后输出的文件
        filename: "bundle.js"       //输出的文件叫做bundle.js
    }
};

4、命令行执行webpack

调用全局安装的webpack工具对资源进行打包，最后输出或创建bundle.js文件

5、index.html script src = bundle.js

网页最后调用的是打包后的文件

6、入口文件的数量有多个

//node.js的模块输出标准格式
module.exports = {
    //entry是入口文件,是程序的入口文件的相对地址
    entry: {
        bundle1: "./main1.js",
        bundle2: "./main2.js"
    },
    //打包后输出的文件
    output: {
        filename: "[name].js"
    }
    //输出的文件叫做bundle.js
};

云服务器 GPU云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79363.html

webpack 学习笔记（一）

摘要：引言最近在学习，发现好多知识点，之前一点都没有接触过，如等等。使用本地安装，会存于文件夹内与属性内，更方便项目文件迁移以及协同开发等情况。引言最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为...

zhangwang 2019-08-26 10:36 评论0 收藏0
React学习笔记1：环境搭建

摘要：新搭建的个人博客，本文地址学习笔记环境搭建本文的书写环境为，之后会补充下的差异创建学习目录初始化项目根据相关提示完善信息，入口文件安装相关包，并且使用也就是支持，需要包，因为我之前做个一些相关项目，所以部分包已经全局安装，比如等等，大家新搭建的个人博客，本文地址：React学习笔记1：环境搭建本文的书写环境为mac，之后会补充windows下的差异 1、创建学习目录 mkdir l...

Sourcelink 2019-08-19 17:26 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 评论0 收藏0
webpack学习笔记

摘要：运行该语句会执行如下步骤使用进行文件压缩。设置环境变量，触发某些包，以不同的方式进行编译。在原始的源码中执行查找和替换操作。等同于表示任何出现的地方都会被替换为。提供函数用来合并配置对象当文件小于限制，会返回。选项 1.devtool：通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试。 2.resolve.alias:创建 impor...

Soarkey 2019-08-22 10:53 评论0 收藏0