草庐IT

webpack安装与使用（详细）

远方有只兔子~ 2023-04-08 原文

一.什么是webpack?

webpack是现代javascript应用程序的静态模块打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack更加强调模块化开发管理，文件压缩、预处理等功能，是它附带的功能。
注意：

  • webpack模块化打包webpack为了可以正常运行， 必须依赖node环境，
  • node环境为了可以正常执行很多代码，又必须依赖各种包，
  • 依赖各种包就需要npm工具(node packages manager node包管理 ）

二、webpack安装

安装webpack ,要先安装node.js node.js自带了软件包管理工具npm
1.查看node版本（node的安装自行查找，很简单）

node -v

2.全局安装webpack,避免后面出现版本问题，提前指定版本

npm install webpack@3.6.0 -g

注意：在此处进行全局安装后，后面也会进行局部安装

  • 为什么全局安装后，还需要进行局部安装呢？
    一个项目往往依赖特定的webpack版本，全局的版本可能和这个项目的webpack版本不一致，导致打包出现问题。所以通常一个项目，都有自己的局部的webpack, webpack@3.6.0方便查看配置文件，后面的版本把配置文件隐藏起来了

创建了项目之后在项目文件夹下安装局部：（下面就是在webpacklearn文件夹下安装）

npm install webpack@3.6.0 --save-dev

–save-dev是开发时依赖。项目打包后不需要再使用的

三、webpack使用

（1）新建项目webpacklearn,按下图依次创建文件夹：

！！！！如果项目中依赖node中的一些包 ，npm init运行建package.json

npm init
  • dist文件夹：用于存放打包的文件
  • src文件夹：用于存放我们写的源文件
    main.js:项目的入口文件
    test.js、test2.js 定义一些变量函数，可以在其他地方引用并且使用
  • index.html:浏览器打开展示的首页html
  • package.json:通过npm init生成的，npm包管理的文件

安装局部webpack:

npm install webpack@3.6.0 --save-dev

test.js test2.js 中的内容都要导出到main.js（主文件）中：（下面的代码中分别使用ES6的导入方式与commonJS的导入方式）

//test.js

function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

// commomJS方式导出方式 module.exports = {}
module.exports = {
  add,
  mul
}

//test2.js

//ES6的导出方式 export
export const name = 'why';
export const age = 18;

//main.js文件
const {add,mul} = require('./test.js')
// (1)commonJS方式导入

console.log(add(20, 30));
console.log(mul(20, 30))

//(2) ES6方式导入 
import {
  name,
  age,
  height
} from './test2'

console.log(name);
console.log(age);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    你好哦
  </div>
 <script src="./dist/bundle.js"></script>
</body>
</html>

进行打包：将项目文件夹在集成终端中打开，输入命令：

webpack ./src/main.js ./dist/bundle.js


npm init

一路回车，运行完成后自动创建package.json文件

新建 webpack.config.js

//webpack.config.js与index.html同级

const path = require('path');
//需要使用包  npm init生成package.json文件

module.exports = {
  entry: './src/main.js', //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径,需要使用包path,   __dirname node中的全局变量
    filename: 'bundle.js'
  }, //出口
}

-每次执行都敲这么长一串会不方便：

我们可以在package.json的scripts中定义自己的执行脚本
package.json中的script脚本在执行时，会按照一定的顺序寻找命令对应的位置，
首先，会寻找本地的node_modules/bin路径中对应的命令
如果没有找到，会去全局的环境变量中寻找

简化命令：修改：在项目文件夹下输入webpack的时候完成打包：
webpack命令完成打包：

如何执行我们的build指令呢？–》
再次将打包命令修改命令为 npm run build，修改package.json文件 添加

"build": "webpack"



关于使用全局webpack还是局部webpack的问题？
打开文件在终端直接执行webpack命令，使用的全局安装的webpack
当在package.json中定义了scripts时，其中包含了webpack命令，以及npm run build命令，那么使用的是局部webpack（使用package.json中的script的脚本在执行时，会按照一定的顺序寻找命令对应的位置，如果没有找到，会去全局的环境中寻找，）

四、loader

在上面的代码中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间的相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css/图片，也包括一些高级的将ES6 转为ES5代码，将TypeScript转为ES5代码，将scss/less转为css,将.jsx、.vue文件转为js文件等等
对于webpack本身的能力来说，对于这些转化是不支持的；
给webpack扩展对应的loader就可以啦！
loader使用过程：

  • 步骤一：通过npm安装需要使用的loader

  • 步骤二：在webpack.config.js中的modules关键字下进行配置

loader中文文档：https://www.webpackjs.com/loaders/css-loader/#%E5%AE%89%E8%A3%85

五、 webpack中使用css文件的配置

新建css文件夹，以及文件normal.css,修改一下上面的文件：（修改main.js里面的导入路径）

body{
  /* background-color:rgb(36, 114, 118); */
  background-image: url('../img/girl.jpg');
}

main.js中添加导入css

// 依赖css模块 
require('./css/normal.css')

安装css-loader

npm install --save-dev css-loader@0.23.1

安装style-loader
css-loader只负责将css文件进行加载
style-loader负责将样式添加到dom中

npm install style-loader@0.23.1 --save-dev

配置：webpack.config.js
注意：使用多个loader时，是从右向左使用

//webpack.config.js与index.html同级

const path = require('path');
//需要使用包  npm init生成package.json文件

module.exports = {
  entry: './src/main.js', //入口
  output: {
    path: path.resolve(__dirname, 'dist'), //动态获取路径,需要使用包path,   __dirname node中的全局变量
    filename: 'bundle.js'
  }, //出口
  module:{
    rules:[
      {
        // 正则表达式 匹配所有的css文件，css-
        test:/\.css$/,
        // css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader时，是从右向左使用
        use:['style-loader','css-loader']
      }
    ]
  }
}

打包测试样式能否正确显示样式，npm run build

六、webpack中使用less文件的配置

在css下面新建special.less文件：

@fontSize:50px;
@fontColor:orange;

body {
  font-size: @fontSize;
  color:@fontColor;
}

main.js

//依赖less文件：
require('./css/special.less')

安装：

npm install --save-dev less-loader@5.0.0 less@3.9.0

配置：webpack.config.js

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

打包测试：npm run build

七、webpack中图片文件处理的配置

增加img文件夹，添加一张图片，之后在css中引用，找得图片大小要小一些

引用：

安装：

npm install --save-dev url-loader@1.1.2

添加配置： limit先设置成比9.33*1024大的数字，此时图片处理时使用的是url-loader

      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
                //当加载的图片小于limit时，会将图片编译成base64字符串形式
              limit: 13000
              //大于limit之后，就需要使用file-loader模块加载了
            }
          }
        ]
        }

测试：npm run build 背景正常显示：

修改limit的值小于9.77*1024 ，让其使用file-loader,比如设置成8000

在进行打包就会发现提示下面的错误，表示没有file-loader

安装：file-loader安装完后不用配置就可以使用

npm install --save-dev file-loader@3.0.1

安装上述所有内容的时候都要注意版本，如果安装过程中出现错误，首先检查自己的版本是否对应，在package.json中都可以看到安装内容的版本

安装完成后打包，发现背景图不能正常显示，

路径有问题，当使用file-loader之后，会在dist文件夹中生成32位哈希值名字的图片


图片文件处理-修改文件名字：webpack自动生成的名字是一个32位的哈希值，目的是防止名字重复，
所以，我们可以在opation中添加如下选项：

  • img：文件要打包到的文件夹
  • name:获取图片原来的名字，放在该位置
  • hash8:为了防止图片命名冲突，依然使用hash,但是我们只保留8位
  • ext:使用图片原来的扩展名
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8000,
            name: 'img/[name].[hash:8].[ext]'
          }
        }]
      },

npm run build:生成的图片名称是我们所设置的名称，

正常显示

（未完。。。）

webpack安装quotspanlt

有关webpack安装与使用（详细）的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  10. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

随机推荐