发布在即!企业 AIGC 应用程度测评,3 步定制专属评估报告。抢首批测评权益>>> 了解详情
写点什么

你配置 Webpack 4 的方式可能是错的!

  • 2019-01-14
  • 本文字数:10455 字

    阅读完需:约 34 分钟

你配置Webpack 4的方式可能是错的!

一千个观众就有一千个哈姆雷特。你在网络上可以找到上百万个有关如何配置 Webpack 的教程,所以,你可能已经看到了一千种不同的配置方法。Webpack 本身在快速演化,除此之外,还有很多加载器和插件紧随其后。这就是为什么这些配置文件会各有不同:组合使用同一组工具的不同版本可能会奏效,也可能不能如愿。


很多人一直在抱怨 Webpack 使用起来很麻烦。从某些方面来看,确实如此。但是,我不得不说,从我使用 gulp 和 grunt 的经验来看,它们也存在同样的问题。也就是说,当你使用 npm 模块时,就不可避免地会出现某些模块版本不兼容的问题。


到目前为止,Webpack 4 是最流行的模块捆绑器之一。它提供了很多新特性,例如零配置、合理的默认值、性能改进、开箱即用的优化工具,等等。


零配置:Webpack 4 不需要配置文件,这是 Webpack 4 的一个全新的变更。


性能提升:Webpack 4 是迄今为止最快的 Webpack 版本。


合理的默认值:Webpack 4 的主要概念包括入口、输出、加载器和插件。

核心概念

入口

它应该是一个.js 文件,人们会在这个文件中包含.scss 或.css 文件,这样做可能会导致很多意外的错误。有时候你可能会看到一个入口包含了几个.js 文件。虽然有时候你可以这么做,但它通常会增加更多的复杂性。

输出

这是 build/或 dist/或任意名称的文件夹,用于存放最终的.js 文件。

加载器

它们主要用来编译或转换你的代码,例如 postcss-loader。

插件

插件在将代码输出到文件方面起着至关重要的作用。

快速入门

创建一个新目录,并进入这个目录:


mkdir webpack-4-tutorialcd webpack-4-tutorial
复制代码


初始化 package.json:


npm init
复制代码


或者:


yarn init
复制代码


我们需要下载 Webpack 4 和 webpack-cli:


npm install webpack webpack-cli --save-dev
复制代码


或者:


yarn add webpack webpack-cli --dev
复制代码


现在,打开 package.json 文件,并添加一个构建脚本:


"scripts": {  "dev": "webpack"}
复制代码


运行它,你可能会看到一个警告:


WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
复制代码

Webpack 4 的模式

你需要编辑脚本,在其中包含模式标志:


"scripts": {  "dev": "webpack --mode development"}
ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘~/webpack-4-quickstart’
复制代码


Webpack 会查找一个带有 index.js 文件的文件夹.src/。这是 Webpack 4 的默认行为,因为它是零配置的。


让我们创建一个带有 index.js 文件的目录./src,并这个文件中加一些代码。


console.log("hello, world");
复制代码


现在运行脚本:


npm run dev
复制代码


或者:


yarn dev
复制代码


如果一切正常,你将得到一个./dist/main.js 文件。好了,代码已经编译好了。但刚刚都发生了什么?


默认情况下,Webpack 是零配置的,所以你不需要配置 webpack.config.js。因此,它必须假设一些默认行为,它总是先查找./src 文件夹,然后在其中查找 index.js,并将输出写入./dist/main.js 文件。


如果你遇到这个错误:


ERROR in ./node_modules/fsevents/node_modules/node-pre-gyp/lib/publish.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/mobr/Documents/workshop/test-webpack-4-setup/node_modules/fsevents/node_modules/node-pre-gyp/lib'
复制代码


这里描述了更多细节。要解决这个问题,你需要创建 webpack.config.js 文件,然后按照本文后面的教程配置这个文件。但是首先你需要下载webpack-node-externals


npm install webpack-node-externals --save-dev
复制代码


或者:


yarn add webpack-node-externals --dev
复制代码


然后导入这个模块:


const nodeExternals = require('webpack-node-externals');...module.exports = {    ...    target: 'node',    externals: [nodeExternals()],    ...};
复制代码


拥有 2 个配置文件是 Webpack 的常见做法,尤其是在大型项目中,通常一个用于开发,一个用于生产环境。Webpack 4 提供了两种模式:生产(production)和开发(development)。这样可以避免使用两个文件(对于中型项目)。


"scripts": {  "dev": "webpack --mode development",  "build": "webpack --mode production"}
复制代码


如果你细心一点就会发现,main.js 文件并没有被最小化。


我将在示例中使用 build 脚本,因为它提供了很多开箱即用的优化措施,但其实你可以随意使用它们中的任何一个。build 和 dev 脚本之间最主要的区别在于它们如何输出文件。build 用于创建用于生产环境的代码,而 dev 用于开发环境,所以它支持热模块替换、开发服务器以及其他很多有助于开发工作的东西。


你可以覆盖 npm 脚本中的默认值,只需使用标志:


"scripts": {
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js"
}
复制代码


这将覆盖默认选项,而无需配置任何东西。


作为练习,也可以试一试这些标志:


–watch 标志用于启用监听模式。它将监控你的文件更改,并在每次文件发生更新时重新编译文件。


"scripts": {
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js --watch",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js --watch"
}
复制代码


–entry 标志与–output 标志差不多,但会重写入口路径。

转换.js 代码

现代 JS 代码主要是用 ES6 编写的,但并非所有浏览器都支持 ES6。因此,你需要对代码进行转换——将 ES6 代码转换为 ES5。你可以使用 babel——现在最流行的工具。当然,我们不仅可以转换 ES6 代码,也可以转换其他 JS 实现,如 TypeScript、React,等等。


npm install babel-core babel-loader babel-preset-env --save-dev
复制代码


或者:


yarn add babel-core babel-loader babel-preset-env --dev
复制代码


为 babel 创建配置文件.babelrc,并在文件中粘贴以下内容。


{"presets": [  "env"  ]}
复制代码


我们有两个配置 babel-loader 的方式:


  • 使用配置文件 Webpack.config.js

  • 在 npm 脚本中使用–module-bind


从技术上说,你可以通过 Webpack 引入的新标志做很多事情,但为简单起见,我选择了 webpack.config.js。

配置文件

虽然 Webpack 宣称自己是零配置的,但这种零配置主要还是适用于默认设置,比如入口和输出。


我们将创建包含以下内容的 webpack.config.js:


// webpack v4const path = require('path');// update from 23.12.2018const nodeExternals = require('webpack-node-externals');module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'main.js'  },  target: 'node', // update from 23.12.2018  externals: [nodeExternals()], // update from 23.12.2018  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      }    ]  }};
复制代码


从 npm 脚本中移除标志。


"scripts": {  "build": "webpack --mode production",  "dev": "webpack --mode development"},
复制代码


现在,当我们运行 npm run build 或 yarn build 时,它应该会在./dist/main.js 中生成一个最小化的.js 文件。如果没有,请尝试重新安装 babel-loader。


如果遇到模块“@babel/core”冲突,说明某些预加载的 babel 依赖项不兼容。我遇到的错误是:


Module build failed: Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
复制代码


我是这样解决的:


yarn add @babel/core --dev
复制代码

HTML 和 CSS 导入

我们先在./dist 文件夹中创建 index.html 文件。


<html>  <head>    <link rel="stylesheet" href="style.css">  </head>  <body>    <div>Hello, world!</div>    <script src="main.js"></script>  </body></html>
复制代码


我们在这里导入了 style.css,现在让我们来配置它!正如我们所说,我们只有一个 Webpack 入口点。那么应该将 css 文件放在哪里?在./src 文件夹中创建 style.css 文件。


div {  color: red;}
复制代码


不要忘了将它包含在.js 文件中:


import "./style.css";console.log("hello, world");
复制代码


在 Webpack 中为 css 文件创建一个新规则:


// webpack v4const path = require('path');// update from 23.12.2018const nodeExternals = require('webpack-node-externals');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'main.js'  },  target: 'node', // update from 23.12.2018  externals: [nodeExternals()], // update from 23.12.2018    module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.css$/,        use: ExtractTextPlugin.extract(          {            fallback: 'style-loader',            use: ['css-loader']          })      }    ]  }};
复制代码


在终端中运行:


npm install extract-text-webpack-plugin --save-devnpm install style-loader css-loader --save-dev
复制代码


或者:


yarn add extract-text-webpack-plugin style-loader css-loader --dev
复制代码


我们需要使用 extract-text-webpack-plugin 来编译我们的.css。但是在 Webpack 4 中使用这个插件有点问题,可能会遇到这个错误


要修复这个问题,需要运行:


npm install -D extract-text-webpack-plugin@next
复制代码


或者:


yarn add --dev extract-text-webpack-plugin@next
复制代码


然后你的 css 代码应该被编译为./dist/style.css。


到了这个时候,我的 package.json 的 dev 依赖项看起来像这样:


"devDependencies": {    "babel-core": "^6.26.0",    "babel-loader": "^7.1.4",    "babel-preset-env": "^1.6.1",    "css-loader": "^0.28.11",    "extract-text-webpack-plugin": "^4.0.0-beta.0",    "style-loader": "^0.20.3",    "webpack": "^4.4.1",    "webpack-cli": "^2.0.12"  }
复制代码


请注意,另一种组合可能无法正常运行,因为即使是将 webpack-cli 2.0.12 更新为 2.0.13 也可能会带来问题。


现在它应该将 style.css 输出到./dist 文件夹中了。


Mini-CSS 插件

Mini-CSS 插件旨在取代 extract-text 插件,并为你提供更好的兼容性。我重新修改了我的 Webpack 文件,使用mini-css-extract-plugin来编译 style.css。


npm install mini-css-extract-plugin --save-dev
复制代码


或者:


yarn add mini-css-extract-plugin --dev
复制代码


以及:


// webpack v4const path = require('path');// update from 23.12.2018const nodeExternals = require('webpack-node-externals');// const ExtractTextPlugin = require('extract-text-webpack-plugin');const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[chunkhash].js'  },  target: 'node', // update from 23.12.2018  externals: [nodeExternals()], // update from 23.12.2018  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.css$/,        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader']      }    ]  },  plugins: [    new MiniCssExtractPlugin({      filename: 'style.css',    })  ]};
复制代码


我们需要使用 MiniCssExtractPlugin,因为默认情况下 Webpack 只能识别.js 格式。MiniCssExtractPlugin 将.css 内容提取到./dist 目录下不同的.css 文件中。

配置对 SCSS 的支持

使用 SASS 和 POSTCSS 开发网站已经非常普遍,因此,我们将首先包括对 SASS 的支持。让我们重命名./src/style.css 文件,并创建另一个文件夹来存放.scss 文件。现在我们需要添加对.scss 格式的支持。


npm install node-sass sass-loader --save-dev
复制代码


或者:


yarn add node-sass sass-loader --dev
复制代码


使用./scss/main.scss 替换 style.css,并修改 test 配置,以便支持.scss:


// webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require('webpack-node-externals');const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'main.js'  },  target: "node", // update 23.12.2018  externals: [nodeExternals()], // update 23.12.2018  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.scss$/,        use: [          "style-loader",          MiniCssExtractPlugin.loader,          "css-loader",          "sass-loader"        ]      }    ]  } ...
复制代码

HTML 模板

现在让我们来创建.html 文件模板。将以下内容添加到./src 目录的 index.html 文件中。


<html>  <head>    <link rel="stylesheet" href="style.css">  </head>  <body>    <div>Hello, world!</div>    <script src="main.js"></script>  </body></html>
复制代码


我们需要借助 html 插件才能将这个文件作为模板使用。


npm install html-webpack-plugin --save-dev
复制代码


或者:


yarn add html-webpack-plugin --dev
复制代码


将其添加到你的 Webpack 文件中:


// webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require('webpack-node-externals');const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'main.js'  },  target: "node", // update 23.12.2018  externals: [nodeExternals()], // update 23.12.2018  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.scss$/,        use: [          "style-loader",          MiniCssExtractPlugin.loader,          "css-loader",          "sass-loader"        ]      }    ]  },  plugins: [     new MiniCssExtractPlugin({      filename: "style.css"    }),    new HtmlWebpackPlugin({      inject: false,      hash: true,      template: './src/index.html',      filename: 'index.html'    })  ]};
复制代码


现在./src/index.html 文件就变成了一个模板。现在删除./dist 文件夹其其中的所有文件,然后重新构建,看看是不是一切正常。


rm -rf ./distnpm run dev
复制代码


或者:


rm -rf ./distyarn dev
复制代码


你会看到./dist 文件夹重新生成,其中包含了三个文件:index.html、style.css 和 main.js.

缓存和哈希

开发中最常见的问题之一是如何实现缓存。因为这篇文章主要是关于如何配置 Webpack,所以不会专注于介绍缓存的实现细节。我只想说,解决缓存问题最常用的方法之一是在文件中(例如 style.css 和 script.js)添加一个哈希值。你可以参考这篇文章


使用哈希以后,浏览器只会请求发生变更的文件。


Webpack 4 基于 chunkhash 实现了的内置的哈希功能。修改 Webpack 文件:


// webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require("webpack-node-externals");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[chunkhash].js'  },  target: "node",  externals: [nodeExternals()],  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.scss$/,        use: [            "style-loader",            MiniCssExtractPlugin.loader,            "css-loader",            "sass-loader"          ]       }    ]  },  plugins: [     new MiniCssExtractPlugin({     filename: "style.[contenthash].css"    }),    new HtmlWebpackPlugin({      inject: false,      hash: true,      template: './src/index.html',      filename: 'index.html'    })  ]};
复制代码


在./src/index.html 文件中添加:


<html>  <head>    <link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>">  </head>  <body>    <div>Hello, world!</div>    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>  </body></html>
复制代码


我们将使用 htmlWebpackPlugin.files.chunks.main 模式生成哈希。看一下./dist 目录下的 index.html 文件:




如果我们在不修改.js 和.css 文件的情况下运行 npm run dev,不管运行多少次,两个文件中的哈希值都应该是一样的。

CSS 的哈希问题以及如何解决

如果你在 Webpack 4 中使用了 ExtractTextPlugin,可能会存在这个问题。如果你使用的是 MiniCssExtractPlugin,这个问题应该就不会发生。


我们的解决方案还不够完美。如果我们修改了.scss 文件中的某些代码会怎样?你会发现,现在不生成新的哈希了。如果我们在.js 文件中增加一行 console.log,比如:


import "./style.css";console.log("hello, world");console.log("Hello, world 2");
复制代码


再次运行 dev 脚本,你将看到两个文件中的哈希值已更新。


这个问题是已知的,Stack Overflow 上已经讨论过这个问题


那么应该怎么解决这个问题?


在尝试了很多声称可以解决这个问题的插件后,我终于找到了两个可行的解决方案。

解决方案 1

可能还存在一些冲突,可以试试 mini-css-extract 插件。

解决方案 2

在 CSS Extract 插件中使用[hash]替换[chukhash],但这似乎会与 Webpack 4.3 提供的[contenthash]变量产生冲突,所以可以结合使用这个插件:webpack-md5-hash


现在再测试就会发现两个文件的哈希都会更新。

JS 的哈希问题以及如何解决?

如果你使用了 MiniCssExtractPlugin,可能会遇到另一个问题:每次修改 SCSS 中的某些内容时,.js 文件和.css 输出文件的哈希都会被更新。

解决方案:

使用 webpack-md5-hash 插件。如果你修改了 main.scss 文件并运行 dev 脚本,应该只有新的 style.css 文件里会包含新的哈希,而不是两个文件都会这样。


// webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require("webpack-node-externals");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const WebpackMd5Hash = require("webpack-md5-hash");module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[chunkhash].js'  },  target: "node", // update 23.12.2018  externals: [nodeExternals()], // update 23.12.2018  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.scss$/,        use: ExtractTextPlugin.extract(          {            fallback: 'style-loader',            use: ['css-loader', 'sass-loader']          })      }    ]  },  plugins: [     new MiniCssExtractPlugin({      filename: "style.[contenthash].css"    }),    new HtmlWebpackPlugin({      inject: false,      hash: true,      template: "./src/index.html",      filename: "index.html"    }),    new WebpackMd5Hash()  ]};
复制代码

集成 PostCSS

为了让输出的.css 更进一步,我们可以加入PostCSS


PostCSS 提供了 autoprefixer、cssnano 和其他好用的东西。我每天都在用它。我们需要安装 postcss-loader,还有 autoprefixer,因为稍后会用到它。


npm install postcss-loader --save-devnpm i -D autoprefixer
复制代码


或者:


yarn add postcss-loader autoprefixer --dev
复制代码


创建 postcss.config.js,并粘贴以下内容:


module.exports = {    plugins: [      require('autoprefixer')    ]}
复制代码


我们的 Webpack.config.js 现在应该是这样的:


// webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require("webpack-node-externals");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const WebpackMd5Hash = require("webpack-md5-hash");module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[chunkhash].js'  },  target: "node",  externals: [nodeExternals()],  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.scss$/,        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']      }    ]  },  plugins: [    new MiniCssExtractPlugin({      filename: 'style.[contenthash].css',    }),    new HtmlWebpackPlugin({      inject: false,      hash: true,      template: './src/index.html',      filename: 'index.html'    }),    new WebpackMd5Hash()  ]};
复制代码


请注意插件的顺序:


use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
复制代码


加载器按照从尾到头的顺序使用插件。


你可以向.scss 文件中添加更多内容并检查输出,以此来测试autoprefixer


你也可以在.browserslistrc 文件中指定要支持的浏览器来调整输出的内容。


你可以在这个网站上了解更多 PostCSS 可用的插件,例如:



我使用 cssnano 来最小化输出文件,并用css-mqpacker来处理媒体查询。


也有人说可以试试 cleancss。

保持整洁

在重新生成文件之前,我们可以尝试使用 clean-Webpack-plugin 来清理./dist 文件夹。


// webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require("webpack-node-externals");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const WebpackMd5Hash = require("webpack-md5-hash");const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[chunkhash].js'  },  target: "node",  externals: [nodeExternals()],  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      },      {        test: /\.scss$/,        use:  [  'style-loader',                  MiniCssExtractPlugin.loader,                  'css-loader',                  'postcss-loader',                  'sass-loader']      }    ]  },  plugins: [     new CleanWebpackPlugin('dist', {} ),    new MiniCssExtractPlugin({      filename: 'style.[contenthash].css',    }),    new HtmlWebpackPlugin({      inject: false,      hash: true,      template: './src/index.html',      filename: 'index.html'    }),    new WebpackMd5Hash()  ]};
复制代码


带有最新版本插件的 package.json 看起来是这样的:


{ “name”: “webpack-test”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “build”: “webpack --mode production”, “dev”: “webpack --mode development” }, “author”: “”, “license”: “ISC”, "devDependencies": {   "@babel/core": "^7.2.2",   "autoprefixer": "^9.4.3",   "babel-core": "^6.26.3",   "babel-loader": "^8.0.4",   "babel-preset-env": "^1.7.0",   "css-loader": "^2.0.2",   "html-webpack-plugin": "^3.2.0",   "mini-css-extract-plugin": "^0.5.0",   "node-sass": "^4.11.0",   "postcss-loader": "^3.0.0",   "sass-loader": "^7.1.0",   "style-loader": "^0.23.1",   "webpack": "4.28",   "webpack-cli": "^3.1.2"}, "dependencies": {   "clean-webpack-plugin": "^1.0.0",   "webpack-md5-hash": "^0.0.6",   "webpack-node-externals": "^1.7.2" }}
复制代码


英文原文:


https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1


更多内容,请关注前端之巅(ID:frontshow)



2019-01-14 10:2816150
用户头像

发布了 731 篇内容, 共 432.1 次阅读, 收获喜欢 1997 次。

关注

评论 1 条评论

发布
用户头像
使用extract-text-webpack-plugin的时候报错: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
解决方法:在module.exports里面加
plugins: [
new ExtractTextPlugin("styles.css"),
]
展开
2019-01-18 11:19
回复
没有更多了
发现更多内容

阿里资深专家整理的Redis5设计与源码分析宝典终于横空出世

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

为联邦学习互信提供“技术解”,星云Clustar荣获FTL-IJCAI 21 最佳应用论文奖

星云Clustar

联邦学习 论文 IJCAI 纵向联邦学习 联邦学习互信

服务全球用户,EMQ X Cloud 新增欧洲部署支持

EMQ映云科技

服务器 mqtt 部署与维护 Cloud emq

java布道者耗尽20年的功力整理完结java实战第2版文档

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

数字货币交易所自动刷量机器人介绍|开发交易所去中心化量化机器人

Geek_23f0c3

市值管理机器人系统开发 自动刷量机器人 炒币机器人

48W字?GitHub上下载量破百万的阿里:图解Java、网络、算法笔记

Java~~~

Java 架构 面试 算法 JVM

IT运维审计系统是什么?有推荐的吗?

行云管家

云计算 堡垒机 IT运维 数据审计 运维审计

PyFlink 开发环境利器:Zeppelin Notebook

Apache Flink

Zeppelin notebook pyflink 开发环境利器

PyFlink 开发环境利器:Zeppelin Notebook

阿里云大数据AI技术

如何高效工作,享受品质生活?看看少数派的经验总结吧

博文视点Broadview

10年IT老兵亲述SpringCloud开发从入门到实战文档

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

LeetCode刷题14-简单-最长公共前缀

ベ布小禅

8月日更

牛掰!阿里大佬刷了四年LeetCode才总结出来的数据结构和算法手册

Java~~~

Java 架构 面试 算法 数据结构与算法

三个月学完阿里数位架构师总结的281页架构宝典PDF终入蚂蚁

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

6年Java经验,4面阿里定级P7,多亏阿里13万字+脑图+源码面试笔记

Java~~~

Java spring 架构 面试 高并发

技术盘点:Unity SDK 开发中有哪些大坑?

环信

快手基于 Flink 构建实时数仓场景化实践

Apache Flink

flink 解决方案 实时数仓架构 快手

拍乐云Pano 两周年啦!砥砺前行,踏浪潮头,做全行业的实时音视频专家

拍乐云Pano

WebRTC RTC

开发者实践丨盲水印插件:用户端的实时视频溯源保护

声网

开发者实践 RTE大赛

SmartNews:基于 Flink 加速 Hive 日表生产的实践

Apache Flink

flink hive airflow

如何短时间突击 Java 通过面试?

Java架构师迁哥

MySQL基于GTID复制实现的工作原理

Java MySQL 数据库 面试 后端

一起来养猪APP开发

游戏开发_软件开发

小程序云开发 游戏开发 2D APP开发 3D

什么样的架构师修炼之道文档,能帮助大家修炼成为出色的架构师?

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

数字货币交易所自动刷量机器人介绍|开发交易所去中心化量化机器人

量化系统19942438797

阿里资深专家分享程序员三门课:技术精进架构修炼、管理探秘文档

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

如何用3分钟搭建一个属于自己的网站?

百度开发者中心

最佳实践 开发者 方法论

谈谈Go的固定时长定时器和周期性时长定时器

Regan Yue

协程 Go 语言 8月日更

【架构实战营】--第一次作业

Geek_d18264

架构实战营

springboot整合activiti自带在线流程编辑器,整个程序源码,请假审批

金陵老街

大前端 工作流 ERP Activiti spring-boot 2.5.4

如何搭建SpringcloudAlibaba基础环境(一)

不焦躁的程序员

Java 微服务

你配置Webpack 4的方式可能是错的!_大前端_Margarita Obraztsova_InfoQ精选文章