Webpack (1)起步-管理资源-管理输出

最新推荐文章于 2021-07-16 15:10:45 发布
最新推荐文章于 2021-07-16 15:10:45 发布
阅读量994 收藏 1
点赞数 1
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/men_gqi/article/details/109412031
版权

基本安装使用

安装webpack

安装指定版本:npm install webpack@4.44.1 webpack-cli@3.3.12

初始化项目

npm init -y//自动设置 也可以选择 npm init 手动设置配置
之后npm install webpack webpack-cli --save-dev (生成开发环境)–save-dev可以缩写为-D```

下载打包依赖

npm install --save lodash

创建目录结构

  |- package.json
+ |- /src
+    |- index.js
+ |- /dist
+   |- index.html

src/index.js

 import _ from 'lodash';

  function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist/index.html

<!doctype html>
<html>
 <head>
   <title>起步</title>

 </head>
 <body>

 <script src="main.js"></script>
 </body>
</html>

package.json

{
  "name": "webpack-dom",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "lodash": "^4.17.20"
  },
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

此处通用使用:npx webpack运行 打包静态输出main.js
如果使用全局安装webpack此处可以使用:webpack 打包输出main.js
否则可以运行./node_modules/.bin/webpack 输出

使用配置文件

///更新目录 添加webpack.config.js
 webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

之后 npx webpack 运行打包 可以看到dist文件中多了bundle.js

npm 脚本
package.json中script里加"build": "webpack"配置
可以使用npm run build 运行打包 更便捷

整合其他资源

为了使用css 需要安装配置style-loader 和 css-loader：npm install --save-dev style-loader css-loader
webpack.config.js中添加配置

   module: {
     rules: [
       {
         test: /\.css$/,
        use: [
          'style-loader',
           'css-loader'
        ]
       }
     ]
   }

src文件下添加style.css

.hello{
color:red;
}

src/index.js中

//添加引入模块
import './style.css';
//并添加class名 hello
element,classList.add("hello")

npm run build更新加载

加载图片
下载依赖：npm install --save-dev file-loader
webpack.config.js页

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

添加src/icon.png
引用:src/index.js中

  import _ from 'lodash';
  import './style.css';
+ import Icon from './icon.png';

  function component() {
    var element = document.createElement('div');

    // Lodash，现在由此脚本导入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

+   // 将图像添加到我们现有的 div。
+   var myIcon = new Image();
+   myIcon.src = Icon;
+
+   element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

src/style.css

  .hello {
    color: red;
+   background: url('./icon.png');
  }

重新构建:npm run build 再次打开html文件 一切顺利文字傍边会有图片

加载字体
通过更新webpack.connfig.js 来处理为文字文件

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

src中添加文件my-font.woff和my-font.woff2
src/style.css

+ @font-face {
+   font-family: 'MyFont';
+   src:  url('./my-font.woff2') format('woff2'),
+         url('./my-font.woff') format('woff');
+   font-weight: 600;
+   font-style: normal;
+ }

  .hello {
    color: red;
+   font-family: 'MyFont';
    background: url('./icon.png');
  }

从新构建npm run build 看是否处理了文字

加载数据
下载依赖:npm install --save-dev csv-loader xml-loader
webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+         ]
+       },
+       {
+         test: /\.xml$/,
+         use: [
+           'xml-loader'
+         ]
+       }
      ]
    }
  };

添加文件src/data.xml
src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

现在，你可以 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量将包含可直接使用的已解析 JSON：
src.index.js中引入

import Data from './data.xml';
并在component方法中打印console.log(Data)
```console.log(Data)
**全局资源**
更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets

```javascript
- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

管理输出

预先准备
src中添加print.js文件
内容如下

export default function printMe() {
  console.log('I get called from print.js!');
}

在src/index.js中使用

  import _ from 'lodash';
+ import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
+   var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+   btn.innerHTML = 'Click me and check the console!';
+   btn.onclick = printMe;
+
+   element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

同时更新dist/index.html

  <!doctype html>
  <html>
    <head>
-     <title>Asset Management</title>
+     <title>Output Management</title>
+     <script src="./print.bundle.js"></script>
    </head>
    <body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script>
    </body>
  </html>

之后将entry添加src/print.js作为新的入口起点(print) 然后修改output,一便动态生成bundle文件名称
webpack.config.js

  const path = require('path');

  module.exports = {
-   entry: './src/index.js',
+   entry: {
+     app: './src/index.js',
+     print: './src/print.js'
+   },
    output: {
-     filename: 'bundle.js',
+     filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

npm run build更新运行
设定 HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

npm run build更新
如果你在代码编辑器中将 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

清除dist时候

依赖: npm install clean-webpack-plugin --save-dev

使用和中文文档有所更新
使用可用
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

plugins: [new CleanWebpackPlugin()],

笔记:

  1. webpack.config.js配置文件

  "dependencies": {///为生产环境运行-S产生
    "lodash": "^4.17.20"
  },
  "devDependencies": {///开发环境 本地存储  -D产生
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }

2…install 用于安装 uninstall用于卸载

大白菜1号
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
webpack学习笔记(四) 自动编译
半虹小站
09-09 409
我们每次修改代码之后，如果想要在浏览器中看到变化，都先要手动编译代码，这样未免有些麻烦 在 webpack 中，配置某些选项可以帮助我们在代码发生变化之后自动编译代码
webpack
weixin_33721344的博客
10-17 106
请参考右边网页的Installation和Getting Started篇：https://webpack.js.org/guides/ 安装webpack 先使用git bash进入一个你想安装的位置，然后请在git bash里输入如下命令，该命令将下载最新版本的webpack。 cd //这里填写你想安装的位置 npm install...
webpack指南-webpack入门-开始使用webpack
weixin_33847182的博客
03-01 83
webpack用来在你的app中建立JS模块。为了从cli或api开始使用webpack，按照安装手顺即可。 webpack通过快速构建app依赖图并以正确顺序打包来简化工作。webpack可以配置来做代码定制优化，为产品划分vendor/css/js，运行一个热重载你的代码的开发服务器而不需要刷新页面之类的...
前端网页字体优化指南
qq_24810411的博客
07-16 1527
日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能起到非常关键的影响，因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。 转换字体格式 现在是 1202 年了，各主流设备基本都支持 woff2 字体格式，
使用@ font-face
CSS 初学者指南
06-21 319
@font-face规则允许将自定义字体加载到网页上。 一旦添加到样式表，该规则将指示浏览器从托管位置下载字体，然后按照CSS中的指定显示字体。 如果没有规则，我们的设计将仅限于用户计算机上已经加载的字体，具体取决于所使用的系统。 这是现有系统字体的详细分类 。 尽可能深的浏览器支持 这是目前可能获得最深层支持的方法。 @font-face规则应在任何样式之前添加到样式表中。 ...
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
react-webpack-HMR-middleware:通过webpack-dev-middleware和webpack-hot-middleware对热模块重新加载做出React
05-07
react-webpack-HMR-middleware有三种方式实现热加载:使用使用使用中间件关于怎么选择合适的方式, 这有一些简单的解释.尽可能的简化安装, 选择 webpack-dev-server CLI.如果想要使用a task runner类似于grunt 或 gulp...
webpack-dev-middleware：用于webpack的开发中间件
02-06
webpack-dev-中间件 与捆绑包一起使用的快速开发中间件，可用于服务从Webpack发出的文件。 这应该仅用于开发。 使用此中间件的一些好处包括： 没有文件写入磁盘，而是处理内存中的文件 如果文件以监视模式更改，则...
webpack-subresource-integrity：用于启用Subresource完整性的Webpack插件
02-06
webpack-subresource-integrity Webpack插件，用于启用子资源完整性。 （SRI）是一项安全功能，使浏览器可以验证是否已交付获取的文件（例如，从CDN获取的文件）而没有意外的操作。 产品特点 与可选集成。 自动...
精简版微软雅黑 woff格式
11-17
woff格式的微软雅黑字体，可以满足大部分网站要求
关于web中的字体, .woff, .eot, .svg
热门推荐
qq_26445509的博客
03-30 2万+
一般情况下引用字体@font-face时，会把woff，eot，svg都引用进去，浏览器根据需要下载不同类型的字体。 IE--.eot;    其它浏览器--.woff；    手机浏览器一般是--.ttf; truetype: 是windows和mac系统最常用的字体格式。 eot: eot是嵌入式字体，是微软开发的技术，允许onetype字体用@font-face嵌入到网页。
解决IIS Web部署 svg/woff/woff2字体找不到问题
深南大道
02-21 8468
最近项目中用到了fontawesome-webfont.svg等字体。部署项目后，发现没有发现浏览器总是报找不到woff、woff2字体的错误。​ 原因：因为服务器IIS不认SVG，WOFF/WOFF2 这几个文件类型，只要在IIS上添加MIME 类型即可。 登录网址下载对应的文件放在自己的项目中 http://fontawesome.io/#modal-download​ 1、
网络字体的中文用法(一)
weixin_30730151的博客
07-25 297
网络字体的中文用法(一) 2014年6月10日歪脖骇客 1条评论 9 如果你使用的Windows XP操作系统，在浏览中文网页时，你会发现网页上的汉字基本上全部都是宋体。这是因为你的操作系统里安装了中文宋体字库，而且被设定为默认字体。浏览器会用你的默认字体显示网页上的汉字。进入Windows7/8时代，Windows系统的默认字体变成了微软...
自定义web字体-通过@font-face在页面中嵌入 .woff格式字体的引用
瑰的博客
11-01 7583
woff文件样式查看链接 http://fontstore.baidu.com/static/editor/index.html​​​​​​​    上传woff文件 即可看到woff文件的展示效果 woff文件可以用python的fontTools 打开 font = TTFont('xxx.woff') # 打开文件 font.saveXML('xxx/6329.xml')...
webpack实践之路（四）：管理资源
若水弹丸之地
12-19 386
webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。 一、加载CSS 1、安装 为了从 JavaScript 模块中 import 一个 CSS 文件，我们需要在 module 配置中 安装并添加 style-loader 和 css-loader，在终端输入： &amp;amp;amp;amp;amp;amp;gt; sudo npm install --save-dev st...
由iconfont引起的svg、ttf、woff、woff2图标的研究及转换（svgs2fonts）
qq_24357165的博客
07-30 1万+
由iconfont引起的svg、ttf、woff、woff2图标的研究及其转换 1.背景 其实很早之前便想通过iconfont来实现图标管理和统一（一方面也是为了偷懒，不，是工程化），然而总总原因拖到了现在。 个人感觉iconfont最大的优势有三点 - 矢量图标。相比切图，至少不会糊。 - 可控颜色。相比切图，至少可以换颜色。 - 方便管理和调用。相比切图，至少不会忘。 - 减少请...
woff 字体文件解析 字体结构说明
彦文的专栏
09-16 1万+
woff文件样式查看 http://fontstore.baidu.com/static/editor/index.html 在这个网址 上传woff文件 即可看到woff文件的展示效果 woff代码查看 woff文件可以用python的fontTools 打开 font = TTFont('xxx.woff') # 打开文件 font.saveXML('xxx/6329.xml'...
解决Web部署 svg/woff/woff2字体 404错误
小菜鸟的Blog
01-18 3055
最近项目中用到了fontawesome-webfont.svg等字体。部署项目后，发现没有<,+等符号，字体也不对，发现浏览器总是报找不到woff、woff2字体的错误。​原因：因为服务器IIS不认SVG，WOFF/WOFF2 这几个文件类型，只要在IIS上添加MIME 类型即可。​IIS7 解决办法： http://www.cnblogs.com/hanwen/p/4212622.html​ I
webpack webpack-cli webpack-dev-server配置
最新发布
08-16
npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大白菜1号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值