自从 webpack 构建

大佬教程收集整理的这篇文章主要介绍了自从 webpack 构建，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决自从 webpack 构建？

我刚刚将项目中旧的 CSS 和 Js 构建过程从 grunt（和更少的 CSS）迁移到 webpack 5（和 sCSS 中的 CSS），一切似乎都很好。但是有一个问题： 有时而不是这样

以下是 DevTools 中的心形：

.fa-heart:before {
    content: "";
}

Fontawesome webFonts 似乎没有正确加载，而是像这样加载

当我在 DevTools 中检查它时，心脏看起来是这样的

.fa-heart:before {
    content: "";
}

我本来希望看到

.fa-heart:before {
    content: "\f004";
}

当我在 DevTools 中手动将其更改为该值时，它可以工作。

当我在浏览器中开始灯塔审核时，这可以重现：灯塔完成后的最后一次加载将始终如下所示。

老实说，我什至不知道如何用谷歌来解决这个问题。 我尝试使用 webfontloader 加载字体，但这对问题没有帮助。

我在 main.sCSS 中包含了这样的 Fontawesome：

@import "~@fortawesome/Fontawesome-pro/sCSS/Fontawesome";
@import "~@fortawesome/Fontawesome-pro/sCSS/light";
@import "~@fortawesome/Fontawesome-pro/sCSS/solID";

这是我的 webpack 配置的简化（更少条目）版本：

@H_345_14@module.exports = {
  entry: {
    './dist/styles.min': { import: './src/sass/main.sCSS' },'./dist/scripts.min.Js': { import: './src/Js/scripts.Js' },}
  module: {
    rules: [
      {
        test: require.resolve("jquery"),loader: "expose-loader",options: {
          exposes: ["$","jquery","jquery"],},{
        test: /\.s?[ac]ss$/i,use: [
          // Compiles Sass to CSS
          MiniCSSExtractPlugin.loader,"css-loader","sass-loader",],{
        test: /\.Jsx?$/,exclude: /(node_modules|bower_components)/,use: {
          loader: "babel-loader",options: {
            presets: [["@babel/preset-env",{ deBUG: false,useBuilTins: "usage",coreJs: 3 }],"@babel/preset-react"],plugins: [["@babel/plugin-transform-runtime",{ coreJs: 3 }]],{
        test: /(ignorE)/,use: {
          loader: "ignore-loader",{
        test: /\.(png|jpe?g|gif|svg|ttf|eot|woff2?)$/i,use: [
           {
            loader: "file-loader",options: {
              outputPath: "dist/assets/",publicPath: "/assets/",]
  },output: {
    path: __dirname,filename: "[name]?[contenthash]",resolve: {
    extensions: [".Jsx",".Js",".Json"],plugins: [
    new MiniCSSExtractPlugin({
      filename: "[name].CSS?[contenthash]",}),optimization: {
    minimize: !DEV_MODE,minimizer: [
      "...",new TerserPlugin({ extractComments: false }),new CSSMinimizerPlugin(),splitChunks: {
      cacheGroups: {
        polyfills: {
          test: /[\\/]node_modules[\\/](@babel|core-Js|regenerator|promisE)/,name: "./dist/polyfills.min.Js",chunks: "all",vendor: {
          test: /[\\/]node_modules[\\/](slick|bootstrap|jquery)/,name: "./dist/vendor.min.Js",}

解决方法

TerserPlugin({
  terserOptions: { output: { ascii_only: true } }
})

大佬总结

以上是大佬教程为你收集整理的自从 webpack 构建全部内容，希望文章能够帮你解决自从 webpack 构建所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。