AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

万字文章总结 Webpack

2022-12-07 78
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 从本质上讲，webpack 是一个现代的 JavaScript 应用的静态模块打包工具。其中可以抽出两个关键词：模块和打包。

万字文章总结 Webpack

认识 webpack


什么是 webpack？


  1. 从本质上讲，webpack 是一个现代的 JavaScript 应用的静态模块打包工具。


  • 其中可以抽出两个关键词：模块和打包。


模块


  1. 前端模块化：


  • 见 Vue 组件笔记前端模块化
  • 在 webpack 中支持所有前端模块化的方案：AMD、CMD、CommonJS、ES6。
  • 在 ES6 以前，我们想要进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
  • 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
  • 而 webpack 其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
  • 而且不仅仅是 JavaScript 文件，CSS、图片、json 文件等等在 webpack 中都可以被当作模块来使用。
  • 这就是 webpack 中模块化的概念。


2.打包

  • 理解了 webpack 可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。
  • 就是将 webpack 中的各种资源模块进行打包合并成一个或多个包（Bundle）。
  • 并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将 scss 转成 css ，将 ES6 语法转成 ES5 语法，将 TypeScript 转成 JavaScript 等等操作。
  • 但是打包的操作 grunt/gulp 也可以完成，他们有什么不同呢？


和 grunt/gulp 的对比


  1. grunt/gulp 的核心是Task。
  • 我们可以配置一系列的 task ，并且定义 task 要处理的事务（例如ES6、ts转化，图片压缩，scss 转成 css ）。
  • 之后让 grunt/gulp 来依次执行这些 task ，而且让整个流程自动化。
  • 所以 grunt/gulp 也被称为前端自动化任务管理工具。


  1. 看一下 gulp 的 task。
const gulp = require('gulp')
const babel = require('gulp-babel')
gulp.task('js',() =>
  gulp.src('src/*.js')
    .pipe(babel({
        presets:['es2015']
    }))
    .pipe(gulp.dest(dist))
)
  • 上面的 task 就是将 src 下面的所有 js 文件转成 ES5 的语法。
  • 并且最终输出到 dist 文件夹中。


  1. 什么时候用 grunt/gulp 呢？
  • 如果工程模块依赖非常简单，甚至是没有用到模块化的概念。
  • 只需要进行简单的合并、压缩、就使用 grunt/gulp 即可。
  • 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用强大的 webpack 了。、


  1. 所以，grunt/gulp 和 webpack 有什么不同呢？
  • grunt/gulp 更加强调的是前端流程的自动化，模块化并不是它的核心。
  • webpack 更加强调模块化开发管理。而文件压缩合并、预处理等功能，是它附带的功能。


webpack 的安装


  1. webpack 为了可以正常运行，必须依赖于 node 环境。


  1. 全局安装 webpack （因为 Vue CLI2 依赖3.6.0，所以指定版本为3.6.0）。
npm install webpack@3.6.0 -g

3.局部安装 webpack（后续才需要）


  • --save-dev`是开发时依赖，项目打包后不需要继续使用的。
cd 对应目录
npm install webpack@3.6.0 --save-dev

4.为什么全局安装后，还需要局部安装呢？

  • 在终端直接执行 webpack 命令，使用的全局安装的 webpack。
  • 当在 package.json 中定义了 script 时，其中包含了 webpack 命令，那么使用的就是局部 webpack。


局部安装 webpack


  1. 目前我们使用的是全局的 webpack 。
  • 因为一个项目往往依赖特定的 webpack 版本，全局的版本可能和这个项目的 webpack 不一致，导致打包出现问题。
  • 所以通常一个项目，都有自己局部的 webpack 。


  1. 安装步骤：
  • 第一步：项目中需要安装包自己局部的 webpack。
  • 以 webpack 3.6.0 为例。
npm install webpack@3.6.0 --save-dev
  • Vue CLI3 中已经升级到 webpack4 ，但是它将配置文件隐藏了起来，所以查看起来不方便。


  • 第二步，通过 node_modules/.bin/webpack 启动 webpack 打包。
node_modules/.bin/webpack


package.json 中定义启动


  1. 每一次都敲那么长的代码不方便。
  • 我们可以在 package.json 的 scripts 中定义自己的执行脚本。


  1. package.json 中的 script 的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
  • 首先，会寻找本地的 node_modules/.bin 路径中对应的命令。
  • 如果没有找到，会去全局的环境变量中寻找。
  • 如何执行设定的 build 指令呢？
npm run build


webpack 的起步


准备工作


  1. 我们创建如下文件和文件夹：


  1. 文件和文件夹解析：
  • dist 文件夹：用于存放之后打包的文件。
  • src 文件夹：用于存放我们写的源文件。
  • main.js ：项目的入口文件。具体内容查看下面详情。
function add(num1,num2) {
    return num1 + num2
}
function mul(num1,num2) {
    return num1 * num2
}
module.exports = {
    add,
    mul
}

mathUtils.js ：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。

const math = requre('./mathUtils')
console.log('hello webpack')  // 控制台输出 hello webpack
console.log(math.add(10,20))  // 控制台输出 30
console.log(math.mul(10,20))  // 控制台输出 200
  • index.html ：浏览器打开展示的首页HTNL。


  • package.json ：通过 npm init 生成的，npm 包管理的文件（暂时没有用上，后面才会用上）。


js文件的打包


  1. 现在的 js 文件中使用了模块化的方式进行开发，他们不可以直接使用。
  • 因为如果直接在 index.html 引入这两个 js 文件，浏览器并不识别其中的模块化代码。
  • 另外，在真实项目中当有许多这样的 js 文件时，一个个引用非常麻烦， 并且后期非常不方便管理。


  1. 可以使用 webpack 工具，对多个 js 文件进行打包。
  • webpack 就是一个模块化的打包工具，所以它支持代码中写模块化，可以对模块化的代码进行处理。
  • 如果在处理完所有模块的关系后，将多个 js 打包到一个 js 文件中，引入时，就变得非常方便了。


  1. 使用 webpack 的指令即可完成打包：
webpack src/main.js dist/bundle.js


使用打包后的文件


  1. 打包后会在 dist 文件夹下，生成一个 bundle.js 的文件。
  • bundle.js 文件是 webpack 处理了项目直接文件依赖后生成的一个 js 文件，只需要将这个 js 文件在 index.html 中引入即可。
<script src="./dist/bundle.js"></script>


webpack 的配置


入口和出口


  1. 如果每次使用 webpack 都需要写上入口和出口作为参数就非常麻烦。


  1. 这时可以创建一个 webpack.config.js 文件来解决。
const path = require('path')
module.exports = {
    // 入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可。
    entry: './src/main.js'
    // 出口：通常是一个对象，里面至少包含两个重要属性，path 和 filename
    output: {
      path: path.resolve(__dirname,'dist')
        filename: 'bundle.js'
  }
}


loader 的使用


什么是 loader？


  1. loader 是 webpack 中一个非常核心的概念。


  1. webpack 用来做什么呢？
  • 在之前的实例中，主要用 webpack 来处理 js 代码，并且 webpack 会自动处理 js 之间相关的依赖。
  • 但是，在开发中不仅仅有基本的 js 代码处理，也需要加载 css、图片，也包括一些高级的将 ES6 转成 ES5 代码，将 TypeScript 转成 ES5 代码，将 sass、less转成 css ，将 .jax、.vue文件转成 js 文件。
  • 对于webpack 本身的能力来说，对于这些转化是不支持的。
  • 给 webpack 扩展对应的 loader 就可以了。


  1. loader 使用过程：
  • 步骤一：通过 npm 安装需要使用的 loader。
  • 步骤二：在 webpack .config.js 中的 modules 关键字下进行配置。


  1. 大部分 loader 我们都可以在 webpack 的官网中找到，并且学习对应的用法。


CSS 文件处理 - 准备工作


  1. 项目开发过程中，必然需要添加很多样式，而样式往往写到一个单独的文件中。
  • 在 src 目录中，创建一个 css 文件，其中创建一个 normal.css 文件。
  • 也可以重新组织文件的目录结构，将零散的 js 文件放在一个 js 文件中。


  1. normal.css 中的代码非常简单，就是将 body 设置为 red 。


  1. 但是，这时的 normal.css 中的样式会生效吗？
  • 当然不会，因为没有引入。
  • webpack 也不可能找到他，因为只有一个入口，webpack 会从入口开始查找其他依赖的文件。


  1. 在入口文件中引用：
const math = require('./js/mathUtils')
console.log('hello webpack')
console.log(math.add(10,20))
console.log(math.mul(10,20))
// 必须在这里引用一次 css 文件
require('./css/normal.css')


css-loader 和 style-loader


  1. css-loader 只负责加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码。


  1. style-loader 负责将模块导出的内容作为样式并添加到 DOM 中。


  1. 使用多个 loader 时，是从右向左使用的。


下载安装 css-loader 和 style-loader

npm install --save-dev style-loader


less-loder


less 文件处理-准备工作


  1. 如果希望在项目中使用 less、scss、stylus来写样式，webpack 也可以处理。


  1. 以 less 为例：
  • 先在 css 文件夹中创建一个 less 文件。
  • 安装 less-loader：
npm install --save-dev less-loader less

配置：

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};


less 文件处理——less-loder


  1. 在安装 less-loder 的时候，还安装了 less ，因为 webpack 会使用 less 对 less 文件进行编译。


  1. 其次，修改对应的配置文件。
  • 添加一个 rules 选项，用于处理 .less 文件。


图片加载


url-loder


  1. 安装
npm install --save-dev url-loder

2.当加载的图片，小于 limit 时，会将图片编译成 base64 字符串形式。


3.当加载的图片，大于 limit 时，需要使用 file-loder 模块进行加载。


  • 安装
npm install --save-dev file-loder

2.当加载的图片，小于 limit 时，会将图片编译成 base64 字符串形式。


3.当加载的图片，大于 limit 时，需要使用 file-loder 模块进行加载。


  • 安装
npm install --save-dev file-loder
  • 再次打包，就会发现 dist 文件夹下多了一个图片文件。


图片文件处理 - 修改文件名称


  1. 在打包完成以后，webpack 自动生成了一个非常长的名字。
  • 这是一个32位 hash 值，目的是防止名字重复。
  • 但是真实开发中，可能对打包的图片名字有一定的要求。
  • 比如将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复。
options:{
  limit:8192,
  name:'img/[name].[hash:8].[ext]'
}

2.所以，可以在 option 中添加如上如下选项。

// 出口：通常是一个对象，里面至少包含两个重要属性，path 和 filename
output:{
  path: path.resolve(__dirname,'dist'), // 注意：path 通常是一个绝对路径。
  filename: 'bundle.js',
  publicPath: 'dist/'
}
  • img：文件要打包到的文件夹。
  • name：获取图片原来的名字，放在该位置。
  • hash:8 ：为了防止图片名称冲突，依然使用 hash ，但是我们只保留 8 位。
  • ext：使用图片原来的扩展名。


3.但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确。

  • 默认情况下，webpack 会将生成的路径直接返回给使用者。
  • 但是，我们整个程序是打包在 dist 文件夹下的，所以我们需要在路径下再添加一个dist/


ES6 语法处理


  1. 如果仔细阅读 webpack 打包的 js 文件，发现写的 ES6 语法并没有转成 ES5 ，那么就意味着可能一些对 ES6 还不支持的浏览器没有办法很好的运行我们的代码。


  1. 如果希望将 ES6 的语法转成 ES5 ，那么就需要使用 babel。
  • 而在 webpack 中，我们直接使用 babel 对应的 loder 就可以了。
npm install --save-dev babel-loder@7 babel-core babel-preset-es2015

3.配置 webpack.config.js 文件。

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

4.重新打包，查看 bundle.js 文件，发现其中的内容变成了 ES5 的语法。


webpack 中配置 Vue


引入 Vue.js


  1. 后续项目中，会使用 Vue.js 进行开发，而且会以特殊的文件来组织 vue 的组件。


  1. 现在希望在项目中使用 Vue.js ，那么必然需要对其有依赖，所以需要先进行安装。
  • 因为后续是在实际项目中也会使用 Vue 的，所以并不是开发时依赖。
npm install vue --save

3.最后就可以按照之前学习的方式来使用 Vue 了。


打包项目 - 错误信息


  1. Vue 在打包之后会生成两个版本：
  • runtime-only：代码中，不可以有任何的 template 。
  • runtime-compiler：代码中，可以有 template ，因为有 compiler 可以用于编译 template 。


  1. 修改完成后，重新打包，运行程序：
  • 打包过程没有任何错误（因为只是多打包了一个 vue 的 js 文件而已）。
  • 但是运行程序，没有出现想要的效果，而且浏览器中有报错。
  • 这个错误说的是当前使用的是 runtime-only 版本的 Vue 。


  1. 解决办法：修改 webpack 的配置，添加如下内容就行
resolve: {
  // alias: 别名
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}


el 和 template 区别（一）


  1. 正常运行之后，我们来考虑另外一个问题：
  • 如果希望将 data 中的数据显示在界面中，就必须是修改 index.html 。
  • 如果后面自定义了组件，也必须修改 index.html 来使用组件。
  • 但是 html 模板在之后的开发中，并不想手动的来频繁修改，是否可以做到呢？


  1. 定义 template 属性：
  • 在 Vue 实例中定义了 el 属性，用于和 index.html 中的 #app 进行绑定，让 Vue 实例之后可以管理它其中的内容。
  • 这里可以将 div 元素中的 {{message}} 内容删掉，只保留一个基本的 id 为 div 的元素。
  • 但是如果依然希望在其中显示 {{message}} 的内容，应该怎么处理呢？
  • 我们可以再定义一个 template 属性，代码如下：
new Vue({
  el: '#app',
  template: '<div id="app">{{message}}</div>',
  data:{
    message: '你好呀！'
  }
})


el 和 template 区别（二）


  1. 重新打包运行程序，显示一样的结果和 HTML 代码结构。


  1. el 和 template 模板的关系：
  • el 用于指定 Vue 要管理的 DOM ，可以帮助解析其中的指令、事件监听等等。
  • 如果在 Vue 实例中同时指定了 template ，那么 template 模板的内容会替换掉挂载的对应 el 模板。


  1. 这样做的好处是：不需要在开发中再次操作 index.html ，只需要在 template 中写入对应的标签即可。


  1. 但是书写 template 模板非常麻烦，所以会将 template 模板中的内容进行抽离，分成 template 、 script 、 style 三部分进行书写，结构变得非常清晰。


Vue 组件化开发引入


  1. 在 Vue 开发过程中，都会采用组件化开发的思想。


  1. 那么，怎么做才能采用组件化的形式进行开发呢？


  • 查看下面的代码：
const app = {
  template: '<h2>{{name}}</h2>',
  data() {
    return {
      name: '我是app组件'
    }
  }
}
new Vue({
  el: '#app',
  template: `
    <div id="app">
      {{message}}
      <App/>
    </div>
  `,
  data: {
    message: 'codewhy'
  },
  components: {
    App
  }
})
  • 也可以将上面的代码抽取到一个 js 文件中，并且导出。


.Vue 文件封装处理


  1. 一个组件以一个 js 对象的形式进行组织和使用的时候是非常不方便的。
  • 一方面编写 template 模块非常的麻烦。
  • 另一方面如果有相同的样式的话，不清楚写在哪里合适。


  1. 可以使用一种全新的方式来组织一个 Vue 文件。


  1. 但是这个文件可以被正确的加载吗？
  • 必然是不可以的，这种特殊的文件以及特殊的格式，必须使用合适的 loader 帮我们处理。
  • vue-loder 和 vue-template-compiler 。


  1. 安装 vue-loder 和 vue-template-compiler 
npm install vue-loder vue-template-compiler --save-dev

5.修改 webpack.config.js 的配置文件。

{
  test: /\.vue$/,
  use: ['vue-loader']
}


plugin 的使用


认识 plugin


  1. plugin 是什么？
  • plugin 是插件的意思，通常是对于某个现有的架构进行扩展。
  • webpack 中的插件，就是对 webpack 现有功能的各种扩展，比如打包优化，文件压缩等等。


  1. loader 和 plugin 区别：
  • loader 主要用于转换某些类型的模块，它是一个转换器。
  • plugin 是插件，它是对 webpack 本身的扩展，是一个扩展器。


  1. plugin 的使用过程：
  • 步骤一：通过 npm 安装需要使用的 plugins（某些 webpack 已经内置的插件不需要安装）。
  • 步骤二：在 webpack.config.js 中的 plugins 中配置插件。


  1. 所有的插件都能让 webpack 变得更好用。


添加版权的 Plugin


  1. BannerPlugin：为打包的文件添加版权声明，属于 webpack 自带的插件。


  1. 按照下面的方式来修改 webpack.config.js 文件：
const path = require('path')
const webpack = require('webpack')
module.exports = {
  ...
  plugins:[
    new webpack.BannerPlugin('最终解释权归XXX所有')
  ]
}

3.重新打包程序，查看 bundle.js 文件的头部，看到如下信息：

/*! 最终解释权归XXX所有 */
/******/ (function(modules) { // webpackBootstrap


打包 html 的 plugin


  1. 目前，index.html 是存放在根目录下的。
  • 但是在真实发布项目的时候，发布的是 dist 文件夹里面的内容，但是 dist 文件夹里面如果没有 index.html 文件，那么打包的 js 等文件也就没有意义了。
  • 所以，在打包的时候也需要将 index.html 文件打包到 dist 文件夹中，这个时候就可以使用 HtmlWebpackPlugin 插件。


  1. HtmlWebpackPlugins 插件会帮我们做：
  • 自动生成一个 index.html 文件（可以指定模板来生成）。
  • 将打包的 js 文件，自动通过 script 标签插入到 body 中。


  1. 安装 HtmlWebpackPlugins 插件：
npm install HtmlWebpackPlugin --save-dev

4.使用插件，修改 webpack.config.js 文件中 plugins 部分的内容如下：

plugins:[
  new webpack.BannerPlugin('最终解释权归XXX所有'),
  new htmlWebpackPlugin({
    template: 'index.html'
  })
]
  • 这里的 template 表示根据什么模板来生成 index.html 。
  • 另外，需要在删除之前在 output 中添加的 publicPath 属性。
  • 否则插入的 script 标签中的 src 可能会有问题


js 压缩的 Plugin


  1. 在项目发布以前，需要对 js 等文件进行压缩处理。


  • 这里的 js 指的是打包好的 js 。


  • 使用一个第三方插件 uglifyjs-webpack-plugin ，并且版本号指定1.1.1，和 CLI2 保持一致。
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改 webpack.config.js 文件，使用插件：

const path = require('path')
const webpack = require('webpack')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  ...
  plugins:[
    new webpack.BannerPlugin('最终解释权归XXX所有'),
    new uglifyJsPlugin()
  ]
}
  • 查看打包后的 bundle.js 文件，是已经被压缩过了。


搭建本地服务器


  1. webpack 提供了一个可选的本地开发服务器，这个本地服务器基于 node.js 搭建，内部使用 express 框架，可以实现浏览器自动刷新显示修改后的结果。


  1. 不过它是一个单独的模块，在 webpack 中使用之前需要先安装它。
npm install --save-dev webpack-dev-server@2.9.1

3.devserver 也是作为 webpack 中的一个选项，选项本身可以设置如下属性：

  • contentBase：为哪一个文件夹提供本地服务，默认是根文件，我们这里要填写./dist 。
  • port：端口号。
  • inline：页面实时刷新。
  • historyApiFallback：在 SPA 页面中，依赖 HTML5 的 history 模式。


4.webpack.config.js 文件配置修改如下：

devServer: {
  contentBase: './dist',
  inline: true
}

5.可以在配置另外一个 script：


  • --open 参数表示直接打开浏览器。
"dev": "webpack-dev-server --open"


webpack 配置分离


  1. 将公共的 script 代码放在一个 js 文件里面，不同的放在另外的 js 文件中。


  1. 使用 webpack-merge 将所有的配置文件合并在一起。
// 用法
webpackMerge(baseConfig,{
  ... // 需要合并的配置
})

3.直接执行指令会报错，这是需要在 package.json 文件中指定一下需要执行的配置文件。

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"

4.一定要注意各个配置文件的路径是否正确。

文章标签：
JavaScript
前端开发
HTML5
移动开发
数据格式
JSON
关键词：
文章Webpack
vobc4pj3rw4ou
目录
相关文章
游客onesoximwfy4q
|
JSON JavaScript 前端开发
看了涡流大佬的面试文章的总结（Webpack）
看了涡流大佬的面试文章的总结（Webpack）
游客onesoximwfy4q
187 0
游客ksbqbsfjgo6v6
一篇文章带你浅入webpack的DLL优化打包
我们在使用第三方包的时候，一般内部的代码都不会变，但是当webpack打包的时候，还是回去处理第三方包。我们是否可以利用一些方法来改进呢？我们可以先对第三方包处理，然后再打包。
游客ksbqbsfjgo6v6
247 0
一篇文章带你浅入webpack的DLL优化打包
dufadayang
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
dufadayang
133 60
我是快乐的嘟嘟
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
我是快乐的嘟嘟
38 10
我是快乐的嘟嘟
|
1月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
我是快乐的嘟嘟
45 9
有路有乔-六月
|
1月前
|
缓存 前端开发 JavaScript
深入了解Webpack：模块打包的革命
【10月更文挑战第11天】深入了解Webpack：模块打包的革命
有路有乔-六月
27 1
六卿
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境，包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件，并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
六卿
109 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
一缕微风绕指柔
|
1月前
|
缓存 前端开发 JavaScript
Webpack技术深度解析：模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析：模块打包与性能优化
一缕微风绕指柔
37 0
代码bug生产队
|
1月前
|
前端开发 JavaScript 开发者
深入了解Webpack：现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack：现代JavaScript应用的打包利器
代码bug生产队
25 0
dufadayang
|
2月前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
dufadayang
25 1

热门文章

最新文章

  • 1
    【vue】webpack打包vue项目并且运行在Tomcat里面
  • 2
    webpack window 使用sass来编译css样式
  • 3
    vue之webpack打包原理和用法详解
  • 4
    2.2.3 使用webpack loader
  • 5
    wp2vite的妙用，让webpack项目支持vite
  • 6
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 7
    你真的理解 Webpack？请回答下列问题
  • 8
    【前端异常】vscode：无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，Cannot find module ”webpack“
  • 9
    webpack指南-webpack介绍-代码分割 - CSS
  • 10
    2.2.4 webpack 配置文件
  • 1
    使用Webpack的module.hot API来定义模块的热替换
    74
  • 2
    webpack热更新原理
    59
  • 3
    【TypeScript技术专栏】TypeScript与Webpack构建优化
    89
  • 4
    【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量，实现环境变量差异化、配置参数动态化和条件编译
    319
  • 5
    webpack实战——手写常用plugin
    296
  • 6
    webpack学习笔记--优化
    59
  • 7
    webpack学习笔记--基本配置
    71
  • 8
    深入了解Webpack：前端模块打包工具
    103
  • 9
    构建工具：配置Webpack打包Vue项目
    95
  • 10
    js开发：请解释什么是Webpack，以及它在项目中的作用。
    60

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • 企业Web常用架构LAMP-LNMP实战
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应
  • Python Web 框架 Django 快速入门
  • Python Web 框架 Flask 快速入门
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 面向Web应用的三维建模实战
  • 从Web到Cloud App——YunOS Web App 开发经验分享

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • WEB网页编程实战
  • Web Terminal环境使用指南
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)