学习webpack,看这一篇就够了

最新推荐文章于 2024-05-02 23:09:04 发布
最新推荐文章于 2024-05-02 23:09:04 发布
阅读量3.4k 收藏 28
点赞数 7
文章标签： webpack 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li5466667/article/details/124545028
版权

1.webpack基本介绍

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
在这里插入图片描述
现代 javascript 应用程序的 静态模块打包器 (module bundler)

  • 静态: 文件资源
  • 模块: node环境, 引入文件, 遵守模块化语法

除了合并代码, 还可以翻译和压缩代码

  • less/sass -> css
  • ES6/7/8 -> ES5
  • html/css/js -> 压缩合并

2.学习webpack的准备工作

准备

环境准备：它是基于nodejs，所以本机一定要先安装了node。
项目准备：webpack是用来对已有项目进行打包，所以一定是在某个项目下进行应用打包。
知识准备：模块化（es6, commonjs模块化均可）

操作顺序

1.安装node
2.用npm init 初始化项目(如果已经有package.json，则跳过这一步)
3.在当前项目中安装并使用webpack

示例项目

目标：在一个已存在的项目中，一个html文件中引入了两个js文件，完成某个功能。现在是的任务是把这两个js打包成一个js文件。

操作步骤如下：

初始化项目

任意新建一个空文件夹，取名为webpack-demo，进入到文件夹内部，用 npm init -y 命令来生成一个package.json

准备初始代码

创建三个文件index.html,index.js,tool.js，最后的项目结构是:
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>index</title>
  </head>
  <body>
    <div id="app">
      
    </div>
    <!-- 引入两个js文件 -->
    <script src="./tool.js"></script>
    <script src="./index.js"></script>

</body>
</html>

tool.js

const updateDom = (id, content) =>{
    window.document.getElementById(id).innerHTML =  content
}

index.js

updateDom ('app','index.html')

说明：

  • 在一个html中引入多个js文件，并且要注意它们的顺序关系。
  • script代码在body的底部，这样可以确保是dom节点渲染在js代码执行之前。

因为在index.js要用到tool.js的功能，所以还在index.html中同时引用了index.js和tool.js，并把tool.js的引用放在index.js的引用之前。如下整个代码的示意图：
在这里插入图片描述
上面的代码中有如下问题：

  • js文件之间有先后的引用的关系：由于index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。
  • 存在变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。
  • 随着.js文件个数增加，则项目会越来越不好管理。

解决思路：模块化 + webpack打包

3.安装并使用webpack

安装webpack

webpack是一个工具，对于所有的项目都可以来使用，从这个意义上来讲，它是可以去全局安装的，但是，考虑到不同的项目中可能使用了不同的webpack版本，所以不推荐大家去全局安装。特别是打开一个老项目时，一定要注意一下它的webpack的版本号。

注意点:前端很多悲惨故事，都是是从版本不一致开始的。采用局部安装的方式来安装它，注意，它只是一个开发依赖，并不是生产依赖，所以在命令行中加上-D。

命令如下：npm i webpack webpack-cli -D

下面来通过命令行工具来检查是否安装成功。
在这里插入图片描述
注意:

  • 由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。
  • npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。 在这里，我们通过它来调用项目安装的模块，它在运行时会在node_modules/.bin中去检查命令是否存在。
  • webpack作为一个独立的工具，它与具体的项目无关。在你的项目中，通过开发依赖安装它

修改用模块化的方式来改写代码

以模块化的方式来修改：

  • 在tool.js中导出模块
  • 在index.js中使用模块

在tool.js导出模块
它用来提供一个方法，供其它模块来使用。这里使用commonjs规范（就是node.js中的导出模块的方式）导出工具方法。

const updateDom = (id, content) => {
  window.document.getElementById(id).innerHTML = content
}
module.exports={
  updateDom
}

在index.js中导入模块
在index.js中引入tool.js中的定义的方法。注意，这里已经涉及到了在一个js中引用另一个js

const {updateDom}=require('./tool')
updateDom('app', 'index.html')

由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错。
在这里插入图片描述

我们接下来就需要使用webpack命令来对index.js进行处理了。

使用webpack来做打包

命令格式是：npx webpack 文件名
这里的操作是：
在这里插入图片描述在这里插入图片描述

如果没有遇到错误，会看到类似的结果如下：
在这里插入图片描述
它说明打包操作已经成功：index.js和tool.js已经合成了一个main.js文件了。
webpack会分析入口文件中的引用关系，把相关的文件合成在一起，变成一个.js文件
在这里插入图片描述
示意如下:
在这里插入图片描述

引入打包后的js

把上面打包完成的main.js引入到index.html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>

<body>
  <div id="app">

  </div>
  <!-- 引入打包后的.js文件 -->
    <script src="./dist/main.js"></script>
</body>

</html>

示意图如下：
在这里插入图片描述

运行index.html,浏览器页面显示
在这里插入图片描述

小结

1.为啥要用webpack?

  • 有效处理模块化。默认情况下，浏览器并不支持模块化，而我们的前端项目又使用了模块化，有了webpack之后，就可以突破这个限制了。
  • webpack可以把多个相互引用的.js文件打包成一个文件，且文件有加密，压缩的效果，上线更安全。

2.这个过程中nodejs起了什么作用？

  • 它是webpack的运行基础，没有了nodejs环境，就无法做类似于文件读写的操作了。
  • 最终生成的main.js并不是在nodejs环境中运行的，整个的项目效果还是在浏览器中运行的。

在这里插入图片描述

4.认识webpack的配置文件

了解配置文件

工具运行的默认参数配置会放置在某个具体的文件。
例如：迅雷/百度网盘下载的文件保存在哪里？

配置文件的作用

在这里插入图片描述
是否特殊指定使用哪个配置文件, 如果是的话,采用配置文件的配置来做打包,否则就去项目根目录找是否有一个webpack.config.js的文件,如果找到,直接按照这个配置来打包,否则使用内置的默认配置打包

创建并使用默认配置文件

在项目根目录下创建一个名为webpack.config.js。其内容如下：

module.exports={
  mode: 'development',//打包方式
}

这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置。在操作层面，就是学习如何去使用这个文件。

然后，再次运行打包命令，查看产生的main.js文件的内容，对比与之前的变化。

5.设置入口和出口

在配置文件中，配置自定义的入口和出口
在这里插入图片描述

入口和出口

入口文件： 指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块，这样在打包时就会「顺藤摸瓜」也将其他的文件打包进来。
出口文件：指定了最后打包之后的文件，重点是这个文件的具体位置。

在webpack中，默认的入口和出口分别是：

  • 默认入口是：./src/index.js
  • 默认出口是：./dist/main.js

也就是说，如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下。

了解默认入口文件

修改目录结构，新建一个src目录，并把index.js，tool.js移动到它下面。
在这里插入图片描述
直接省略入口文件，直接打包： npx webpack 由于在src目录已经存在index.js
再来测试一下。

设置入口文件

需求：如果在实际开发中，希望：

  • 这个入口文件不是index.js，而是main.js
  • 整体js文件不是放在src目录下，而是src/js下

解决：

(1) 调整目录结构如下：
在这里插入图片描述
(2) 然后，修改配置项
1.修改src/index.js的名字为src/js/main.js
2.在webpack.config.js的配置项中添加 entry项

module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js' //入口文件
}

3.重新打包，测试。

指定出口文件

在webpack.config.js中设置output项。

目标： 把出口文件设置为在build目录下的bundle.js

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/build'), // 决定出口文件在哪里
    filename: 'bundle.js' // 设置出口文件的名字。默认情况下，它叫main.js
  }
}

说明：

  • output中的filename用来指定打包后的文件名字。
  • output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。
  • 如果path中的路径不存在，它会自动创建。

6.修改打包模式

webpack.config.js中的mode项用来设置打包的方式，如果不设置，会默认为production。

module.exports = {
  mode:"development"
}

webpack给mode 提供了两个模式:

  • evelopment :开发模式(代码不会压缩 混淆)
  • production:生产模式（压缩，混淆，加密… 不可读）

7.在打包时指定配置文件

下面，自已创建一个webpack.dev.js的文件，用它来做配置文件。

在项目根目录下创建webpack.dev.js，内容如下：

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/dev'), // 决定出口文件在哪里
    filename: 'dev.js' // 设置出口文件的名字。默认情况下，它叫main.js
  }
}

下面，希望使用这个配置文件中的设置来打包。

它的格式是：

npx webpack --config webpack的配置文件

运行命令：

npx webpack --config webpack.dev.js

8.简化打包命令

背景

当涉及多个打包配置要指定时，打包命令比比较复杂，难以记忆。

定制script

可以在package.json中添加script命令来快速启动webpack，格式如下：

“scripts”: {
“自定义命令名”: “要具体执行的代码”,
}

示例

"scripts": {
  "dev": "webpack --config webpack.dev.js",
  "build": "webpack",
  "test": "echo "Error: no test specified" && exit 1"
}

注意：在script中不再需要添加npx。它会自动在node_modules/.bin中去找命令。

这样 ，我们就得到了两个可以执行的命令: dev, build 。

可以在根目录下的小黑窗中通过:

npm run build, npm run dev 来运行

9.webpack基础使用阶段小结

  • webpack的配置文件默认名是webpack.config.js，也可以单独指定
  • 学习webpack就学习webpack.config.js的使用。
  • 把webpack的命令集成到script中可以简化打包命令。
  • 可以自行定义入口和出口文件

10.loader整体介绍

在webpack看来 一切皆模块，图片，样式文件，js文件… 。 但是webpack默认只能处理js模块，对于非js的内容，例如css, less文件，图片文件等等 它就需要一些帮手来处理了。这些帮手就是loader。
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

11.loader处理css文件

如何引入css文件呢？
传统开发中：css样式是通过在.html文件中通过link标签引入的。但是，现代开发中，我们会把css文件看做资源，直接在.js文件中导入。

下面，我们来具体讨论如何处理.css文件。

创建.css文件

在这里插入图片描述
src/css/public.css的内容如下

body,html{
  padding:0;
  font-size:14px;
}

src/css/style.css的内容如下

@import "public.css";
div {
  border:4px solid #ccc;
  width: 50%;
  height: 200px;
  margin:30px auto;
  box-shadow: 3px 3px 3px #ccc;
  background-color: #fff;
  text-align: center;
}

说明：css的@import语句用来导入另一个css文件。

在main.js中导入css

const {updateDom}=require('./tool')
import "../css/style.css"
updateDom('app', 'index.html')

再次，以默认配置文件的打包方式npm run build打包代码，会报错，具体的保存信息如下：
在这里插入图片描述
上面报错的原因是:webpack把.css文件内容当作了js代码来运行，那当然会报错了。所以，解决方法是安装相应的loader来处理。

安装并使用css-loader

对于loader的使用，其基本步骤是一致的,分成两步：
1.安装npm包
2.配置webpack.config.js中的module

安装

安装包的命令是：npm i css-loader -D 。它也是开发依赖。

在配置文件使用

修改webpack.config.js文件，添加module

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/build'), // 决定出口文件在哪里
    filename: 'bundle.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
        {
          test: /\.css$/, // 正则测试
          use: ['css-loader'] // loader
        } 
      ] 
  }
}

再次打包

它不会报错。但是，页面上也并没有出现样式的效果。打包之后的文件中并没有包含css代码。

安装并使用style-loader

如果我们希望样式生效，最终在.html文件中有两种情况：

  • 有style标签
  • 有link标签

而css-loader只是能让你在.js中通过import来引入.css，如果你希望引入的css代码最终以style标签的方式插入到html页面中，则还需要安装一个loader:style-loader

安装

npm i style-loader -D

配置

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/build'), // 决定出口文件在哪里
    filename: 'bundle.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
        {
          test: /\.css$/, // 正则测试
          use: ['style-loader','css-loader'] // loader
        } 
      ] 
  }
}

Tip: 在有多个loader的情况下，use数组中的loader执行顺序是从右到左的过程。即：

  • 先用css-loader来处理css
  • 再用style-loader把css代码插入到html中的style标签中。

打包查看效果

现在就能看到css的效果了 。
在这里插入图片描述

12.loader处理less文件

如果希望处理less文件，则还需要去安装额外的包。

创建less文件

在src目录的less目录下创建 index.less，
在这里插入图片描述
则内容如下:

@import "../css/style.css";

body{
  div {
    color: red;
  }
}

在.js中引用.less

在src/js/main.js文件中引入less


const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')

安装包

npm i less -D
npm i less-loader -D

配置模块

在rules中添加一个配置，专门针对less文件。

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/build'), // 决定出口文件在哪里
    filename: 'bundle.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader', 'css-loader'] // loader
      },
      {
        test: /\.less$/, // 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] // loader
      }
    ]
  }
}

注意：如上配置中，对于less文件的处理涉及三个loader，其处理顺序是less-loader --> css-loader–>style-loader。

  • less-loader:用来加载less文件，并处理成css
  • css-loader：用来加载css文件
  • style-loader:用来将css代码以style标签的格式插入到html文件中

然后可以看效果了
在这里插入图片描述

13.处理资源文件

目标：处理资源文件。假设在css中引入图片，要怎么处理呢？

在项目中引入图片

在src下新增目录,img，并在其下放置两张图片。注意：一张图片大一些，一张图片小一些（可以自行决定）。

  • webpack.png: 49.4kb
  • webpack.svg: 3kb
    -在这里插入图片描述

使用图片

两种方式使用图片：

  • 作为css的背景图
  • 作为独立的图片资源使用

在style.css中引入图片，作为div标签的background。

@import "public.css";

div {
  border: 4px solid #ccc;
  width: 50%;
  height: 200px;
  margin: 30px auto;
  box-shadow: 3px 3px 3px #ccc;
  background-color: #fff;
  text-align: center;
  background-image: url('../img/webpack.svg') //图片路径
}

在src/main.js中，通过代码 - 把⼤图插⼊到创建的img标签上, 添加body上显示


const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')
// 引⼊图⽚-使⽤
import imgUrl from '../img/webpack.png'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

配置

webpack.config.js中的内容如下

//引入nodejs中的核心模块
const path = require('path')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/build'), // 决定出口文件在哪里
    filename: 'bundle.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader', 'css-loader'] // loader
      },
      {
        test: /\.less$/, // 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] // loader
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
        type: 'asset' // 在导出⼀个 data URI 和⼀个单独的⽂件之间⾃动选择
      }
    ]
  }
}

打包后运行index.html效果如下
在这里插入图片描述

loader⼩结

1.⼀切皆模块，不同的模块有不同的loader
2.loader

  • 第⼀步：安装包
  • 第⼆步：配置rules

14.plugin整体说明

webpack中除了loader之外，还有⼀个核⼼概念：plugin，中⽂就是插件。它可以⽤来增强webpack的功能。plugin是⽤于扩展webpack的功能，各种各样的plugin⼏乎可以让webpack做任何与构建相关关的事情。plugin的配置很简单，plugins配置项接收⼀个数组，数组⾥的每⼀项都是⼀个要使⽤的plugin的实例，plugin需要的参数通过构造函数传⼊。使⽤plugin的难点在于plugin本身的配置项，⽽不是如何在webpack中引⼊plugin，⼏乎所有webpack⽆法直接实现的功能，都能找到开源的plugin去解决，我们要做的就是去找更据⾃⼰的需要找出相应的plugin。

html-webpack-plugin

功能：把我们⾃已写的.html⽂件复制到指定打包出⼝⽬录下，并引⼊相关的资源代码。为html⽂件中引⼊的外部资源如script、link动态添加每次compile后的hash，防⽌引⽤缓存的外部⽂件问题。可以⽣成创建html⼊⼝⽂件。

下载安装

命令：npm i html-webpack-plugin -D

配置

在webpack.config.js中，做两件事：

  1. 引⼊插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
  1. 添加⼀个plugins配置
//引入nodejs中的核心模块
const path = require('path')
//引入的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/build'), // 决定出口文件在哪里
    filename: 'bundle.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader', 'css-loader'] // loader
      },
      {
        test: /\.less$/, // 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] // loader
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
        type: 'asset' // 在导出⼀个 data URI 和⼀个单独的⽂件之间⾃动选择
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 打包输出HTML
      minify: { // 压缩HTML⽂件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空⽩符与换⾏符
        minifyCSS: true // 压缩内联css
      },
      filename: 'index.html',
      template: path.resolve('./index.html') // 指定模块的位置
    })
  ]
}

3.打包测试

  • 它会把template中指定的.html⽂件复制（压缩）到出⼝⽂件夹
  • 还会⾃动附上打包之后.css和 .js代码

##clean-webpack-plugin
在⽣成打包⽂件之前，把⽬录清空掉。

下载安装

npm i clean-webpack-plugin -D

配置

  1. 引⼊：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  1. 添加plugins
plugins:[
   new CleanWebpackPlugin()，
]

webpack.config.js文件最终配置信息如下

//引入nodejs中的核心模块
const path = require('path')
//引入的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  mode: 'development', //打包方式
  entry: './src/js/main.js', //入口文件
  output: {
    path: path.join(__dirname, '/build'), // 决定出口文件在哪里
    filename: 'bundle.js' // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: { // 处理非js模块
    rules: [ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader', 'css-loader'] // loader
      },
      {
        test: /\.less$/, // 正则测试
        use: ['style-loader', 'css-loader', 'less-loader'] // loader
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
        type: 'asset' // 在导出⼀个 data URI 和⼀个单独的⽂件之间⾃动选择
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ // 打包输出HTML
      minify: { // 压缩HTML⽂件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空⽩符与换⾏符
        minifyCSS: true // 压缩内联css
      },
      filename: 'index.html',
      template: path.resolve('./index.html') // 指定模块的位置
    })
  ]
}

首先在build文件下创建一个test.txt文件
在这里插入图片描述
打包后运行,test.txt文件会自动清除

plugin⼩结

plugin⽤来增加webpack能⼒。
步骤：

  • 下载安装
  • 配置webpack.config.js
    a. 引⼊
    b. 添加plugins的设置

15.webpack实时打包

⽬标

实现实时打包预览效果。当我们修改了代码时，⽴即运⾏打包命令，并显示效果。

⼯具：[webpack-dev-server]

注意:

  • 项⽬开发都是对src⽬录内部的⽂件进⾏更新，不要去修改dist打包好的⽂件
  • 现在对src内部的任何⽂件做修改操作后，都需要重新打包，才可以看到对应效果

步骤

  1. 安装
    npm i webpack-dev-server -D
  2. 在webpack.config.js中做如下配置
module.exports = {
  // 其他省略....
  // 配置 webpack-dev-server的选项
  devServer: {
    host: '127.0.0.1',  // 配置启动ip地址
    port: 10088,  // 配置端⼝
    open: true  // 配置是否⾃动打开浏览器
 }
}
  1. 在package.json中补充⼀个script
"scripts": {
 +  "aaa": "webpack-dev-server", 
 // 它默认会找webpack.config.js⽂件
},

注意点:如果是使用指定配置文件是 “aaa” :“webpack-dev-server --config webpack.dev.js” ; aaa是自己定义的名字
4. 启动命令
现在通过 npm run aaa 就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会⾃动打
开⼀个浏览器窗⼝。
5. 测试

  • 修改.js代码，
  • 修改.css代码，检查是否会重启

注意：
浏览器看到的实时效果是服务器通过“ 内存 ”提供的，没有物理⽂件，也不会⽣成dist⽬录

韬光养晦,厚积薄发
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack的使用，看这一篇就够了
m0_51060602的博客
03-17 2846
学 webpack 看这一篇就够了
Weex入门这一篇就够了
01-27
（1）安装nodejs （2）安装webpack:npminstallwebpack-g （3）安装vue-cli脚手架：npminstallvue-cli-g （1）vueinitwebpackvue-hello(vue-hello为项目名称) （2）cdvue
一看就会的保姆级webpack配置介绍
weixin_48357279的博客
05-02 1827
webpack基本介绍 webpack官网 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 现代 javascript 应用程序的 静态模块打包器 (module bundler) 静态: 文件资源 模块: node环境, 引入文件, 遵守模块化语法 除了合并代码, 还可以翻译和压缩代码 less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩...
安装webpack时，出现无法加载文件 D:\Program Files\nodejs\webpack.ps1，因为在此系统上禁止运行脚本。
qq_43518259的博客
07-09 669
安装webpack时，出现无法加载文件 D:\Program Files\nodejs\webpack.ps1，因为在此系统上禁止运行脚本。
webpack超详细教程，学webpack看这一篇就够了！（上）
最新发布
共同学习，共同成长
05-02 3500
​本文将以基础到进阶的形式详细讲解webpack，包括【webpack基本概念和作用】【使用步骤】【打包、编译和压缩等相关配置】【使用webpack开发服务器】等等，由浅入深，通俗易懂，需要的小伙伴点个关注收藏一下吧！
webpack -v报错及不显示版本号的问题
weixin_46636430的博客
01-29 4713
webpack -v报错及不显示版本号的问题
webpack的安装与使用（保姆级教程）
加油
06-02 5343
webpack的安装与使用保姆级教程目录下会生成一个package.json文件，里面包含一些项目的相关信息 局部安装：（推荐） ps:查看版本号： 假如没有出现版本号，而是出现了电脑配置信息的输入一下代码试试： 问题可参考下面链接： webpack -v没有出现版本号，而是出现了电脑配置信息 可以查看到版本号说明webpack已经按装好了，此时package.json文件也会出现一个依赖： （把安装想成maven引入依赖就很好理解了） 全局安装： 至此，webpack和webpack-cli安装完成。
webpack -v报错（踩坑之旅）
日常笔记/总结/系列知识梳理
09-06 1384
背景 想查看下webpack版本，但执行webpack -v报错 解决方案 步骤一：运行命令npm list --depth=0 -g 检测下webpack、webpack-cli等版本兼容情况 例如以上提示，你安装了webpack-dev-server@4.1.0版本，但你的webpack版本不匹配（提示版本过低），需按照v4.37.0以上的版本，或者直接安装v5.0.0版本（例如直接安装v4.37.0版本：npm install -g webpack@4.37.0） 再次运行命令npm list
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack 学习文件
12-03
**Webpack 学习详解** Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。它将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS 文件、图片或任何其他资源。Webpack 将这些模块相互关联...
vue2.0和webpack学习
03-19
学习Vue 2.0和Webpack，需要理解这两个工具的基本概念和工作原理，掌握它们的配置和使用方式，同时了解如何通过它们构建高效、可维护的前端项目。这将有助于你提升前端开发能力，适应不断发展的前端技术趋势。
webpack-demo:学习webpack
07-16
这个"webpack-demo"项目显然是为了帮助学习者了解和掌握Webpack的基本概念和用法。 在Webpack的工作流程中，主要有四个核心概念： 1. **Entry（入口）**：这是Webpack开始构建应用的地方，它可以是一个文件或多个...
webpack看这一篇就够了
热门推荐
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
webpack使用详解
ScottePerk的博客
11-18 2407
官方定义：从本质上来说，webpack是一个现代的JavaScript的静态模块打包工具。webpack是前端工程化的一个解决方案。提供了前端模块化功能支持，模块混淆，代码压缩，处理浏览器JS兼容性，性能优化等强大功能。
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
weixin_44784401的博客
01-30 8498
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
webpack打包常用配置项
weixin_41166682的博客
09-05 1517
文件结构：最基础版 先安装 npm i webpack webpack-cli --dev。安装好后需要在webpack.config.js文件中配置它。sass和less预处理的loader也可以这样配置。运行命令：npx webpack 进行打包。
输入webpack -v不显示webpack版本号
weixin_54763080的博客
03-22 3467
这里出现这种报错绝对不是没有使用管理员权限造成的，而是因为安装webpack-cli的时候没有@版本号。所以安装webpack-cli的时候需要@你所需要的版本号。输入webpack -v，可以看到现在已经显示版本号了。如果不注意，在后面安装vue脚手架的时候会报错。此时需要删除之前安装的webpack-cli。
Webpack是什么？
q850593913的博客
02-09 306
-------------------------------------2021.02.09------------------------------------------- 本文章包含的内容 了解全局 - Webpack是什么？有什么用？ 定义目标 - 用Webpack打包一个最简单的文件 1. Webpack是什么？有什么用？ a. 是一个打包工具 可以根据多个文件的依赖关系将多个文件打包成一个或者多个文件，正如官网首页演示的图一样 b. 是一个语法转换工具 可以借助loader或者插件将代
Webpack 详细教程
qq_51986661的博客
12-14 1407
文档: https://webpack.docschina.org/Webpack 是一个模块打包器 (bundler)，本质就是一个工具包。在 Webpack 看来，项目源码中所有的静态资源文件都是模块，如 JS / JSON / CSS / LESS / IMG / FONTS 等等，这些文件都会作为模块来处理。Webpack 会根据模块之间的依赖关系，进行分析打包所有在整个依赖图中的模块资源，生成最终的浏览器能高效运行的静态资源。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值