webpack基本应用

Jackwoo 发布于2019-08-22 18:33 / 687人阅读

摘要：介绍官网入门文档本质上，是一个现代应用程序的静态模块打包器。当处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个模块。

介绍

官网：https://www.webpackjs.com/
入门文档：http://www.runoob.com/w3cnote...
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（模块）。

简言之就是把各个JS CSS IMG 都进行打包合并，最终项目只需引用一个build.min.js文件即可

安装

打开控制器，进入到项目根目录：

npm install webpack -g （-g是全局安装）

npm init （初始化项目）

npm install webpack -g （安装webpack）
npm install webpack-command -g （安装webpack的依赖项）

最简单实例

创建mydemo目录,并在该目录下创建如下结构：
mydemo
--dist
--src
----js
------index.js
----css
------app.css
----img
------1.jpg
--webpack.config.js
--index.html

index内容:

webpack.config.js内容：

module.exports = {
    mode: "production",
    entry: [
        "./src/js/index.js"
    ],
    output: {
        filename: "build.min.js"
    },
}

src/js/index.js：

document.write("It works.");

运行：

webpack

浏览器访问index.html

CSS加载打包

这里需要用到webpack的加载器
npm install -g css-loader style-loader

src/css/app.css:

src/js/index.js:

webpack.config.js文件配置：

运行：webpack

CSS中引入IMG加载打包

用到两个加载器
npm install url-loader -g
npm install file-loader -g

CSS中引入图片要注意从根目录写了，而不能用../

src/css/app.css:

webpack.config.js文件配置：

运行webpack:

这里的图片资源路径可以搭配CDN使用

HTML中引入IMG加载打包

npm install html-withimg-loader -g

webpack.config.js文件配置：

index.html:

运行webpack:

实施刷新（监听）

npx webpack --mode development --watch

一旦修改源文件，会看到控制台显示

此时再刷新浏览器就会看到新的修改

云服务器 GPU云服务器阿里云盾web应用防火墙的基本功能 webpack _webpack webpack cdn

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

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

Webpack基本功能理解以及使用

摘要：在这个过程中，会用到一些解析工具用来预处理一些模块以及拓展语言例如这些工具的配置使用都是在中完成的。属性，表示进行转换时，应该使用哪个。插件接口功能极其强大，可以用来处理各种各样的任务。对于前端工程化，webpack一个神奇的工具，既然是个神奇的工具。那我们保留我们的好奇心，来聊一聊它，首先我们要搞清楚webpack到底是用来解决什么问题的，然后我们来看看它到底是怎么做的，最后来看看...

KnewOne 2019-08-26 10:09 评论0 收藏0
Webpack的坑位整理

摘要：在寻找相对路径的文件时会以为根目录，默认为执行启动时所在的当前目录。在文件被添加到依赖图中时，将其转换称为了模块。配置中的两个目标。仅限高级用途，默认情况下自动生成生成文件的文件名。webpack webpack现在是主要的打包工具了，现在网络上也有很多资料可以学习了。这里主要整理了一些基础概念，但没有所有的写，只是把之前遇到的问题记录了一下。本文的原文在我的博客中：github.com...

lidashuang 2019-05-23 17:34 评论0 收藏0
webpack配合vue.js实现完整的单页面demo

摘要：本篇文章主要是我在开发前研究了的单页面应用，因为需要用到的，所以确保安装了，建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用，具体关于里面的内容怎么写并不在本篇文章的介绍范围。本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

2450184176 2019-08-19 18:35 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（上）

摘要：初始项目设置我们将使用包管理器来处理依赖项。使用包管理器可以使您的项目依赖项保持最新状态，并能够获取和安装最新的包。是小型应用的最佳选择之一。翻译：疯狂的技术宅英文标题：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

wizChen 2019-08-21 11:59 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（上）

摘要：初始项目设置我们将使用包管理器来处理依赖项。使用包管理器可以使您的项目依赖项保持最新状态，并能够获取和安装最新的包。是小型应用的最佳选择之一。翻译：疯狂的技术宅英文标题：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

Doyle 2019-07-30 14:29 评论0 收藏0