Webpack 4生产版本​​不加载图像和CSS [英] Webpack 4 Production Build not loading Images and CSS

问题描述

我是webpack的新手，因此我面临以下几个问题:

我的

我的package.json

  {"name":"web"，"version":"1.0.0"，描述": ""，"main":"index.js"，脚本":{"start":"webpack-dev-server-模式开发--history-api-fallback --inline --progress"，"build":"webpack --mode生产"}，作者": ""，"license":"MIT"，"devDependencies":{"autoprefixer":"^ 8.6.4"，"babel-core":"^ 6.26.3"，"babel-loader":"^ 7.1.4"，"babel-preset-env":"^ 1.7.0"，"bootstrap":"^ 4.1.1"，"css-loader":"^ 0.28.11"，"file-loader":"^ 1.1.11"，"html-webpack-plugin":"^ 3.2.0"，"jquery":"^ 3.3.1"，"node-sass":"^ 4.9.0"，"popper.js":"^ 1.14.3"，"postcss-loader":"^ 2.1.5"，"sass-loader":"^ 7.0.3"，"style-loader":"^ 0.21.0"，"url-loader":"^ 1.0.1"，"webpack":"^ 4.13.0"，"webpack-cli":"^ 3.0.8"，"webpack-dev-server":"^ 3.1.4"}，依赖关系":{"roboto-fontface":"^ 0.9.0"}} 

当我运行 npm run start 时，我可以在浏览器上看到加载了所有CSS和图像的应用程序.

当我运行 npm run build 时，我可以看到 dist 文件夹，但是当我从dist文件夹运行index.html时；我看不到任何图像和CSS加载.我在这里做错了什么?

我也在建立静态网站，因此我将在旁边创建多个HTML文件，例如home.html等，那么我如何相应地链接那些页面?

解决方案

如 resolve-url-loader

它应在启用源映射的 sass-loader 之后进行配置.

  {测试:/\.(scss)$/，采用: [{loader:"style-loader"，}，{loader:"css-loader"，}，{loader:"postcss-loader"，选项: {插件:function(){返回 [require('autoprefixer')];}}}，{loader:"resolve-url-loader"}，{loader:"sass-loader"，选项: {sourceMap:true}}]}， 

I am new to webpack so I am facing few issues below:

My GitHub repo

1. Here is the Problem :

My Webpack file :

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Require  html-webpack-plugin plugin

module.exports = {
  entry: __dirname + "/src/app/index.js", // webpack entry point. Module to start building dependency graph
  output: {
    path: __dirname + '/dist', // Folder to store generated bundle
    filename: 'bundle.js',  // Name of generated bundle after build
    publicPath: '/' // public URL of the output directory when referenced in a browser
  },
  module: {  // where we defined file patterns and their loaders
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: [
          /node_modules/
        ]
      },
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run post css actions
          options: {
            plugins: function () { // post css plugins, can be exported to postcss.config.js
              return [
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        exclude: /node_modules/,
        use: 'file-loader?name=fonts/[name].[ext]'
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        exclude: /node_modules/,
        use:'file-loader?name=images/[name].[ext]'
      }
    ]
  },
  plugins: [  // Array of plugins to apply to build chunk
    new HtmlWebpackPlugin({
      template: __dirname + "/src/public/index.html",
      inject: 'body'
    })
  ],
  devServer: {  // configuration for webpack-dev-server
    contentBase: './src/public',  //source of static assets
    port: 7700, // port to run dev-server
  }
};

my folder structure :

My package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --history-api-fallback --inline --progress",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^8.6.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "bootstrap": "^4.1.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.0",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.13.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "roboto-fontface": "^0.9.0"
  }
}

When I run npm run start I can see my application on browser with all CSS and Imagesloaded.

When I run npm run build I can see dist folder however When I run index.html from dist folder; I can't see any images and CSS loaded. What I am doing wrong here?

Also I am building Static website so I will be having multiple HTML files along side e.g. home.html etc. so how can i link those pages accordingly?

解决方案

As explained here Sass does not provide url rewriting, and all url(...)-like imports should be relative to the entry-file.

There is a specific Webpack plugin to automate that: resolve-url-loader.

It's meant to be configured just after sass-loader with source map enabled.

{
    test: /\.(scss)$/,
    use: [{
        loader: 'style-loader',
    }, {
        loader: 'css-loader',
    }, {
        loader: 'postcss-loader',
        options: {
            plugins: function() {
                return [
                    require('autoprefixer')
                ];
            }
        }
    }, {
        loader: 'resolve-url-loader'
    },
    {
        loader: 'sass-loader',
        options: {
            sourceMap: true
        }
    }]
},

这篇关于Webpack 4生产版本​​不加载图像和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！