【转】Webpack 快速上手（中）

最新推荐文章于 2022-08-23 21:20:35 发布
最新推荐文章于 2022-08-23 21:20:35 发布
阅读量151 收藏
点赞数
原文链接：http://www.cnblogs.com/Jingge/p/11498480.html
版权

由于文章篇幅较长，为了更好的阅读体验，本文分为上、中、下三篇：

  • 上篇介绍了什么是 webpack，为什么需要 webpack，webpack 的文件输入和输出

  • 中篇介绍了 webpack 在输入和输出这段中间所做的事情，也就是 loader 和 plugins

  • 下篇介绍了 webpack 的优化，以及在开发环境和生产环境的不同用法

在上一篇中，介绍了通过设置 entry（入口文件）和output（出口文件），来对源代码进行处理，但是在处理过程中，webpack 是如何针对不同的文件进行打包的呢？这就是 loader 和 plugins 的要做的事情了。

loader

个人认为 loader 是 webpack 中最厉害的一个功能了，它让我们可以在项目随意 import 各种类型的文件，css scss html img 等等都不在话下，如果有相关的 loader 支持，甚至可以 import 其它语言的代码。

简单的说 loader 就是一个处理器，在 webpack 中配置好相应的 loader 之后，就可以在代码中像加载 JavaScript 模块一样使用 import 把其它类型的代码当做 JavaScript 模块加载。

loader 的用法有三种

  1. 在 webpack.config.js 中配置，这种方式是最常用的，下面会着重介绍。
  2. 在代码中显示的指定 loader ，下面的代码表示从 styles.css 加载样式文件，用 style-loader 和 css-loader 来处理 css 文件。
import styles from 'style-loader!css-loader?modules!./styles.css';
  1. 在命令行中为某些类型文件执行 loader 。下面的命令表示在打包过程中，对 .css 文件使用 style-loader 和 css-loader 来处理。
webpack --module-bind 'css=style-loader!css-loader'

loader 的配置

loader 的配置其实比较简单，只是提供了太多简写，让新手有点摸不着头脑，首先用 JavaScript、TypeScript、css、scss 来展示常用的几种配置方式：

// webpack.config.js
module.exports = {
  entry,
  output,
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      options: { presets: ['env'] },
      include: __dirname + '/src'
    },
    { test: /\.tsx?$/, use: 'ts-loader' },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.scss$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: { modules: true }
        },
        { loader: 'postcss-loader' },
        { loader: 'sass-loader' }
      ]
    }]
  }
}

从上面的代码中我们可以发现，use 这个选项的配置是最没节操了，它可以是字符串、数组、甚至被 loader 这个选项代替，其实这都是简写。rules.loader 和 loader.options 是 rules.use: [ {loader, options} ] 的简写。这些配置项的含义分别是：

  • test: 正则表达式，用来匹配文件的扩展名。
  • use: 对匹配出的文件使用的 loader 配置，如上面所说，该选项配置灵活，可以简写
  • loader: loader 名称
  • options: loader 的额外配置选项
  • include / exclude: 包括 或 排除 的文件夹，两个选项只能同时出现一个，上面的例子中 include: __dirname + '/src' 表示 babel-loader 只编译 /src 文件下的文件，其它的不做处理；相反的，exclude: __dirname + '/src' 表示不编译 /src 下的文件。

下面就来详细的介绍一下常用的 loader 和其配置。

（题外话，本来是先将 babel-loader 放到第一个介绍的，但是由于篇幅较长，且有些难懂，所以将其放到了后面）

样式处理

npm i style-loader css-loader less less-loader node-sass sass-loader postcss-loader autoprefixer -D

对于样式文件的处理，我们（我）通常会用到以下这些 loader ：

  • style-loader
  • css-loader
  • postcss-loader
  • less-loader
  • sass-loader

那么这些 loader 的使用场景和区别是什么呢？

  1. 首先介绍 less-loader 和 sass-loader 。less 和 sass 都是 css 预处理器，可以让 css 编写起来更爽，但是不能直接在浏览器中运行，所以需要先将 .less 或 .scss 文件先转换成 css 。这就是 less-loader 和 sass-loader 的作用。

  2. 无论是直接编写的 css ，还是由 less 或 sass 转换而来的 css 都不是 JavaScript 模块，这时候就要用到 css-loader ，它的作用就是把 css 转成 JavaScript 模块插入到代码中。

  3. 样式文件已经转换好了，但并不会产生任何效果。因为这些样式还没有添加到页面中，这时候就该轮到 style-loader 出场了，它的作用就是把转换后的样式添加到页面中，就像下面这样。

style-loader

  1. 最后还有 postcss-loader 它的作用也很强大，最常用的功能就是帮助我们自动为一些样式属性名添加私有前戳（-moz、-ms、-webkit）。写过 vue 的同学都知道，当我们给 style 标签添加 scope 属性的时候，打包后的类名会自动添加自定义属性（例如 .panel[_v-72f4cef2]），这个功能就是基于 postcss-loader 实现的。

postcss 需要一份配置文件，这份配置文件以写在单独的文件中 (postcss.config.js)，也可以写在 package.json 的 postcss 属性中：

{
  "postcss": {
    "plugins": {
      "autoprefixer":{}
    }
  }
}

对 postcss 感兴趣的同学可以看看这篇文章: PostCSS真的太好用了！ (https://segmentfault.com/a/1190000014782560)

这些 loader 的执行顺序是 ：

sass-loader or less-loader → postcss-loader → css-loader → style-loader

通过对这些 loader 的配置，我们就可以把样式文件当做 js 文件一样引入了。

// styles.css
.red { color: red; }
// index.js
import './styles.css';

这里需要在额外提一下 css module ，这也是一个很好的特性，写 react 的朋友对它应该很熟悉：

// index.js
import styles from './styles.css';

export default () => (
  <h2 className={styles.red}>css module</h2>
);

从上面的代码中可以看出，我们将样式当做 对象 styles 导入 jsx 中，那么该样式下的所有类名就是 styles 的属性名了。

这样的写法也同样适用于 ES6 的模板字符串：

// index.js
import styles from './styles.css';

const html = `<h2 class="${styles.title}">css module</h2>`;

document.body.innerHTML = html;

只要在 css-loader 的 options 中设置 { modules: true } 既可以开启此功能。

上面的这些配置，可以帮我们将 css 封装成 js对象 ，打包在 .js 文件中，然后运行的时候，以 <style></style> 的方式动态插入到页面中，但我们更希望可以将这些样式从 js 文件中抽取出来放到 css 文件，一来这样显得更优雅一些，二来可以减少 js 为文件体积，避免动态创建 style 标签所带来的性能损耗。这个功能需要在 plugins 中进行设置，下面也会讲到。

file-loader、url-loader

npm i file-loader url-loader -D

如果我们在页面中通过相对路径来引入图片、音频、视频、字体等文件资源时，在 webpack 环境中可能出现路径错误404的问题。主要原因是 开发时的目录结构 和 打包后的目录结构 一般都是不一样的，因此导致路径失效，而 file-loader 就是为了解决这个问题的。

  • file-loader 可以解析页面中引入的资源的路径，然后根据配置，将这些资源拷贝到打包后的目录中。

  • url-loader 则是对 file-loader 进行了一次封装，如果解析的资源是图片，则可以将改图片转成 base64 从而减少 http 请求一提升性能，同时也可以设置 limit。 只对指定大小的图片进行转换。

同样的也可以在 js 中引入资源

// index.js
import logo from './images/logo.png';

const img = new Image();
img.addEventListener('load', () => document.body.appendChild(img));
img.src = logo;

下面是 url-loader 的简单配置参考：

// webpack.config.js
module.exports = {
  entry,
  output,
  module: {
    rules: [{
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 10000, // 10KB 转换为base64
          name: 'images/[name].[ext]' // 拷贝到 images 目录下
        }
      }]
    }]
  }
}

html-loader

npm i html-loader -D

在 Web 开发中，通常会用到很多 html 模板，传统的方式是将模板存在服务端，前端通过 http 请求加载模板，或者在 JavaScript 中拼接字符串，或者在页面中将模板内容写在 <script type="text/template"></script> 内。

而在 webpack 环境下，我们也可以把 html模板 当做 JavaScript 的模块来加载，以 Vue 为例：

<!-- template.html -->
<h2>{{ title }}</h2>
// index.js
import tpl from './template.html'

new Vue({
  el: '#app',
  template: tpl,
  data: {
    title: 'Hello Webpack'
  }
});

在上面代码中，我们将 template.html 的内容以字符串方式导出，这正是 html-loader 的功能，也可以在配置只启用压缩功能。

// webpack.config.js
module.exports = {
  entry,
  output,
  module: {
    rules: [{
      test: /\.html$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: true // 开启压缩
        }
      }]
    }]
  }
}

babel-loader(重点)

npm i @babel/core babel-loader @babel/preset-env @babel/runtime @babel/plugin-transform-runtime -D

Babel is a compiler for writing next generation JavaScript.

从官方的简短介绍中可以知道， babel 属于编译器，输入 JavaScript 源码，输出 JavaScript 源码（source to source），其作用就是将目前部分浏览器目前还不支持的 ES2015+ 语法转换为 ES5 语法。

babel-loader 则是让 babel 可以在 webpack 中使用的工具，同理如果你使用的是 gulp ，则需要用到 gulp-babel 这个包。

实际上，如果只是用 babel 的话，输入的代码和编译后输出的代码是相同的（被 webpack 混淆打包的代码与 babel 无关）。因为 babel 的转换工作全都是由 babel 的插件来完成的。

关于 babel 的介绍和使用，仅仅一个小节的篇幅是完全不够，所以这里贴一个链接，有兴趣的读者一点要点进去看一下 一口（很长的）气了解 babel。

babel 也是需要进行配置的，一般有两种方式：

  1. 在根目录创建 .babelrc
  2. 在 package.json 的 babel 属性中进行配置

我更倾向于在 package.json 进行配置，因为根目录放置太多文件，强迫症实在无法接受。无论是在 .babelrc 还是 package.json 中配置，配置的内容都是一样的，下面以在 package.json 中配置为例：

{
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false,
          "targets": {
            "browsers": [
              "> 1%",
              "last 2 versions",
              "not ie <= 8"
            ]
          }
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-syntax-dynamic-import"
    ]
  }
}

在该配置中，presets 和 plugins 对应的值都是数组，同时数组的每一项可以是 string （只指定名字），也可以是 array （指定名字，并进行更具体的配置）

plugins 表示用到的插件，比如我们在代码中使用到了 import() 动态加载模块这个语法，那么就要在 plugins 添加 @babel/plugin-syntax-dynamic-import 这个插件了；我们需要对 babel 编译后的代码进行去重，就需要用到 @babel/plugin-transform-runtime 。 当然，这两个插件也是需要单独安装的 npm i @babel/runtime @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import -D 。

presets 一组 plugins 的集合。比如我们可以把 @babel/plugin-transform-runtime 和 @babel/plugin-syntax-dynamic-import 打包到一起，叫 preset-my ，这样我们只需要在 presets 中添加 preset-my 就可以了，省去了对 plugins 的配置 。上面的配置文件只配置一个 @babel/preset-env ，这是最常用的配置，@babel/preset-env 后面的对象是对 @babel/preset-env 具体配置。我们注意到，其中有一个 targets.browsers 属性，指定了浏览器版本，这个属性也可以放在 package.json 的 browserslist 中。

为什么配置了 presets 还需要配置 plugins 呢？很简单，如上面所说， presets 是一组 plugins 的集合，也就说 babel 对不同阶段的语法做了整合，方便我们使用。但是在上面的配置中，我们只使用了 @babel/preset-env 这个集合里的插件，而 import() 处于 stage-3 阶段（记不太清了，也可能是 stage-2），不包含于 @babel/preset-env ，所以就需要在 plugins 单独添加 @babel/plugin-syntax-dynamic-import 插件来对 import() 语法进行转换了。

社区中也提供了一些 presets ，比如 react 的 @babel/preset-react ， vue 的 @vue/babel-preset-app

babel 的执行顺序是：

读取plugins数组 → 按正序执行plugins内插件 → 读取presets数组 → 按倒序执行presets内容

简单的介绍了 babel 后，开始配置 babel-loader ：

// webpack.config.js
module.exports = {
  entry,
  output,
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      // options: { presets: ['env'] }, 该项的配置和上面babel的配置完全相同，已经在package.json配置过，这里不需要再配置
      include: __dirname + '/src' // 只对 ./src 目录下的代码进行编译
    }]
  }
}

ts-loader

npm i typescript ts-loader -D

如果你的项目是用 typescript 开发的，这时候就要样到 ts-loader 了。

ts-loader 的配置比较简单，但是有许多需要注意的细节，详情可以参照这里：https://github.com/TypeStrong/ts-loader/blob/master/README.md#configuration

plugins

讲完了 entry、output 和 loader，下面开始讲讲 plugins 。细心的读者应该已经发现，还没有提到代码的压缩，而且按照上面的方式打包会把 .css 和 .js 文件打包在一起，并且打包后的文件体积很大，可能还会存在冗余的代码等等一些问题，plugins 就是为了解决这类问题而产生的。

这里不要把 loader 和 plugins 搞混了，laoder 只是把特定的文件类型转换成 JavaScript 模块，plugins 是在打包过程中对所有模块进行特定的操作 。plugins 的值是一个数组，所有的 webpack 都需要手动通过关键字 new 来实例化。 下面就介绍一些常见的插件。

html-webpack-plugin

npm i html-webpack-plugin -D

webpack 是对 JavaScript 进行打包的，打包出的只能是 .js 文件。 而 JavaScript 要想在浏览器中运行，那就必须在 html 中通过 script 的方式引入。在没有其他工具帮助的情况下，我们只能手动创建 html 文件，然后再把打包后的 .js 文件和 .css 文件写到这个文件中，这样做很麻烦。这时候可以用 html-webpack-plugin 这个插件来自动完成上面的工作。

html-webpack-plugin 提供了一些配置项，如果不行配置，它会自动帮我创建一个空的 html 文件，然后将打包后的资源插入到这个页面内：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry,
  output,
  plugins: [
    new HtmlWebpackPlugin() // 创建 /dist/index.html 文件，并将 index_bundle.js 插入到这个页面中。
  ]
}

同样，我们也可以为其指定一个模板页：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry,
  output,
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的文件名称，默认为 index.html
      template: 'src/index.html', // 以 src/index.html 为模板文件
      inject: 'body', // 将打包后的文件注入到 body 区域内
      title: 'Hello webpack', // 生成文件的标题
      minify: {       // 对生成的文件进行压缩，可以设置为 true ，也可以是对向，进行更具体的配置
        collapseWhitespace: true,   // 删除空格
        minifyCSS: true,
        minifyJS: true,
        removeAttributeQuotes: true,
        removeComments: true,
        removeTagWhitespace: true,
      }
    })
  ]
}

插件也可以通过多次实例化来重复使用：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry,
  output,
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      chunks: ['index', 'vendor'] // 只注入 index.bundle.js 和 vendor.bundle.js 
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: 'src/about.html',
      excludeChunks: ['index'] // 将 index.bundle.js 排除，其余的都注入
    })
  ]
}

分离css和js

  • webpack v4
npm i mini-css-extract-plugin -D

前面在介绍用 loader 处理样式的时候说到，这些样式最终会被混入到打包后的 .js 文件中，在页面运行的时候，在以 <style></style> 的方式动态的插入到 DOM 节点中，这种做法有两个很明显的缺点：

  1. js 和 css 糅杂在一起，增加了单个文件的体积。
  2. 在页面运行时动态的去创建 style 标签，多多少少会有些性能影响

如果能把这些 css 从打包后的 js 中抽取出来，就可以解决上面的两个问题，这时候就要用到 mini-css-extract-plugin 这个插件了。

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry,
  output,
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    })
  ]
}

从上面的配置中可以看出，mini-css-extract-plugin 并不是单独作为一个 plugin 来使用的，它还充当了 loader 的作用，代替了 style-loader 。前面在介绍 style-loader 的时候提到，它的作用是将转换后的样式插入到页面中，既然我们现在需要将 css 和 js 分离开，所以也就不需要再用到 style-loader 了。

当作为插件使用的时候， mini-css-extract-plugin 可以接受两个可选参数：

  • filename ：分离出的css文件名称，写法和 output 的 filename 选项相同，唯一区别是当你想使用缓存的时候，填写的是 contenthash 而不是 chunkhash
  • chunkFilename ：切割出的css文件块名称，写法和 filename 相同

最近发现 extract-text-webpack-plugin 也支持 webpack4 用法了 mini-css-extract-plugin 完全相同，而且相较于 mini-css-extract-plugin 还多了一些可选的配置

npm i extract-text-webpack-plugin -D
// webpack.config.js
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');

module.exports = {
  entry,
  output,
  module: {
    rules: [{
      test: /\.css$/,
      use: [ExtractCssChunksPlugin.loader, 'style-loader']
    }]
  },
  plugins: [
    new ExtractCssChunksPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
      hot: true, //HMR 下面会着重介绍
      orderWarning: true, // Disable to remove warnings about conflicting order between imports
      reloadAll: true, //当启用HMR时，强制重新加载所有css
      cssModules: true //如果启用了 cssModules 此选项设置为 true
    })
  ]
}

压缩css

npm i optimize-css-assets-webpack-plugin -D

在将 css 从 js 中分离出来不之前，我们是不需要考虑压缩 css 的，因为样式都被打包进了 js 文件中，当我们设置 mode 为 production 时，webpack 会自动压缩 js 文件。但是我们现在将 css 从 js 中分离出来了，webpack 目前还不能自动压缩 css 文件。干！真是麻烦！这时候又要用到插件来帮我压缩分离出来的 css 文件了。

// webpack.config.js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry,
  output,
  plugins: [
    new OptimizeCssAssetsPlugin()
  ]
}

这里讲一个坑，在 webpack4 之前，压缩都是通过 webpack.optimize.UglifyJsPlugin 这个插件来完成。webpack4 新增了 mode 和 optimization 两个选项，当 mode 设置为 production 时会自动压缩 js 文件(这个已经提过多次了)，其实将 mode 设置为 production 时， optimization.minimize 便会默认设置为 true ，意思就是在打包的时候对 js 进行压缩。而如果你想用第三方压缩插件，你可以将插件写在 plugins 中，也可以写在 optimization.minimizer 中。但是如你将压缩插件写在 optimization.minimizer 中时，webpack 就会默认读取 ptimizatio.minimizer 这个选项了，这也就意味着，这时候如果你不手动的配置 js 压缩插件，js 文件是不会被压缩，这时候又需要寻找压缩 js 的插件，比如 uglifyjs-webpack-plugin ，然后再配置一下，说实话这样真的很烦，所以我直接将压缩的插件配置在了 plugins 中，这样就省去了对 js 压缩插件的配置。webpack 的文档中描述了相关说明 Minimizing For Production

复制静态资源

npm i copy-webpack-plugin -D

有时候我们的项目中会有一些静态资源，比如网站的favicon、你从不知道的地方找来的不知名的js插件等等，这些静态资源并不会在项目中通过 import 的方式显式的加载进来，而是在直接写在页面中

...
<link rel="shortcut icon" href="static/favicon.ico">
...
<script src="static/xxx.js"></script>

对于这些静态资源，webpack 在打包过程中不会对它们进行处理，所有需要我们 copy 到打包后的目录中，从而保证项目不会因为缺少这些静态文件而报错， copy-webpack-plugin 的作用便是 copy 这些静态资源到指定的目录中的。

// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry,
  output,
  plugins: [
    new CopyWebpackPlugin([
      { from:'static/**',to: 'dist/static' }
    ])
  ]
}

上面的配置表示将 static 文件夹下所有的文件都复制到 dist/static 下面，如果你熟悉 gulp 的话，你会发现这其实就是一个移除了 pipe 的 gulp。

其实对于copy文件这种脏活累活你也可以用你熟悉的方式来完成，比如 gulp、fs-extra 等。

clean-webpack-plugin

npm i clean-webpack-plugin -D

如果我们打包输出的文件使用了 chunkhash 、 hash 等来命名的话，随着文件的变更和打包次数的增加，dist 目录会淤积很多无用的打包文件，这时候便可以借助 clean-webpack-plugin 帮我们清除一些这些无用的文件

// webpack.config.js
const CleanWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry,
  output,
  plugins: [
    new CleanWebpackPlugin('dist', {
      root: __dirname,
      verbose: true,
      dry: false
    })
  ]
}

和 copy 文件一样，删除文件这种话不一定非得让 webpack 来做，我们也可以借助其他的方式来完成，比如我要再提一遍的的 gulp ，又或者 rimraf 、 del 等。但是区别是你需要手动的控制一下任务的流程，总不能在打包完成才删除问吧，所以用 webpack 提供的插件是不需要考虑任务流程的问题。

上面介绍了5个 webpack 的 plugin ，主要目的是让大家体会 webpack plugin 的作用基本用法。 实际上 webpack 的 plugin 还有很多很多，几乎可以满足你在项目构建中的各种需求，webpack 官网了列举很多官方推荐的 plugin https://webpack.js.org/plugins/ ，有兴趣的同学可以前往查看。

转载于:https://www.cnblogs.com/Jingge/p/11498480.html

banguzan6190
关注
Webpack快速上手（五）外部拓展
传说中的腿腿的博客
05-01 970
前言 在日常开发中，我们需要使用很多第三方插件，例如lodash、jQuery等，这些插件不仅需要在开发环境安装，生产环境依旧需要。这就导致一个问题，webpack会把这些第三方插件也打进包里面，大大增加了包的体积，给服务器带来了流量的压力，可不可以直接引用这些包的CDN地址，而不用安装这些包呢？ 外部拓展 首先，我们需要找到插件的CDN地址，可以使用BootCDN搜索：BootCDN 找到CDN地址后，我们在webpack.config.js中做如下配置： module.exports = { ...
新手快速上手webpack4打包工具的使用详解
12-10
本文将深入浅出地介绍如何快速上手使用 Webpack 4，包括理解其基本概念、配置和常见操作。 首先，我们来解决新手常见的两个问题： 1. **全局安装与局部安装**：在学习 Webpack 时，你可能会纠结于是在全局安装...
快速上手webpack
JAN_LIGHT的博客
09-13 161
快速上手webpack 从案例上手webpack 首先目录结构如下 //heading.js export default()=>{ const element = document.createElement('h2') element.textContent = 'Hello world' element.addEventListener('click',()=>{ alert('Hello webpack') }) return
Webpack 快速上手（上）
杏仁技术站
02-28 549
作者 | 朱士奇 杏仁前端开发工程师，代码洁癖症早期，关注前端技术。嫌啰嗦想直接看最终的配置请戳这里webpack-workbench(https://github...
webpack快速上手教程
青涛依旧
08-16 1109
webpack快速上手教程，webpack是什么，为什么选择它 webpack 最早是德国开发者 Tobias Koppers 开发的一个module bundler,简单点说它就是一个为了模块管理而生的工具。 随着web富客户端趋势愈加明显，基于Commonjs和AMD规范的实现和ES6 modules实现的推进，js代码的管理尤为必要，也应运而生了很多模块化工具，如……
webpack快速上手使用
X0923aini的博客
08-23 210
webpack快速上手使用
Webpack快速上手（一） 安装与快速使用
传说中的腿腿的博客
04-27 1347
webpack快速入门系列
React+Webpack快速上手指南(小结)
10-18
快速上手 React+Webpack 需要以下几个步骤： 1. **项目结构**：首先，你需要一个合理的项目结构。一般包括 `app` 目录存放源代码，`components` 子目录放置 React 组件，`build` 目录用于存放编译后的文件，如 `...
webpack如何快速入门和上手？看这篇就会了
攀登Fox的博客
05-24 717
前言 本文我们将会从环境搭建、服务器配置、常用Loader、常用插件和生产打包等方面，一步步详细的介绍Webpack工具的使用，目标是希望可以让大家快速入门和应用。 关于Webpack官网介绍是这样的：它是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 目录前言1、环境搭建1.1、目
Webpack中的query: { presets: ['es2015','react'] }
ch717828的专栏
11-05 3673
问题 最近检查配置的时候，发现在webpack中有一段配置 module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015','react'] } }]...
webpack中loader的使用方法，以及几个常用loader的应用小实例
热门推荐
冰雪为融的博客
05-07 1万+
loader：是webpack用来预处理模块的，在一个模块被引入之前，会预先使用loader处理模块的内容可能，你会遇到当你用webpack打包的时候，提示你需要一个loader来处理文件，那webpack中的loader就是帮助预处理下模块中的内容默认webpack只会处理js代码，所以当我们想要去打包其他内容时，让webpack处理其他类型的内容，就要使用相应的loader使用方法：1、在配置...
【后台管理系统】—— 开发环境的搭建之webpack的配置
柳柳66的博客
02-10 366
前言：学习React16+React-Router4 从零打造企业级电商后台管理系统慕课网课程中的项目准备阶段，重点突破webpack的配置。 一、开发环境依赖 git -> gitee.com 课程官网的git仓库 webpack等 -> yarn -> nodejs node-sass 二、webpack的配置 webpack的安装和配置 系统里...
webpack使用babel
weixin_34019929的博客
07-27 99
几个月没用webpack都忘了好多了。 webpack构建前端，使用时除了entry/output，就是plugins和module.loaders，还有本地测试的devServer。 npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-latest 现在写js流行ES6+，webpa...
webpack入门配置(图文附源码)
Moruin
10-12 303
源码：进阶版：https://gitee.com/Moruin/moruin-study 1.1、创建package.json文件 执行命令： npm init 如下图： 执行完后在项目下会出现package.json文件 1.2、安装webpack //全局安装 npm install -g webpack //安装到你的项目目录 npm install --s...
【SCI2区】基于天鹰优化算法AO优化TCN锂电池健康寿命预测算法研究Matlab实现.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
CPPC++_在许多编程语言中开始编写gilderose重构卡塔的代码.zip
11-12
cppc++
untitled1.cpp
11-12
untitled1.cpp
Apache Spark：Spark项目实战：机器学习模型部署.docx
最新发布
11-12
Apache Spark：Spark项目实战：机器学习模型部署.docx
我的解决方案，以Leetcode问题所有的解决方案提供.zip
11-12
cppc++
React+Webpack快速入门实践
"React+Webpack快速上手指南(小结)" 本文主要介绍如何快速入门React和Webpack的结合使用，适用于已经对这两种技术有一定基础的前端开发者。文章建议使用WebStorm作为开发工具，因为其内建对React JSX语法的高亮显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值