Question

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

我的GitHub回购

1。问题出在这里：

我的Webpack文件：

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
  }
};

我的文件夹结构：

我的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"
  }
}

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

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

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

Answer 1

如here所述，Sass不提供URL重写，并且所有类似url(...)的导入都应相对于入口文件。

有一个特定的Webpack插件可以自动执行该操作：resolve-url-loader。

它应在sass-loader之后启用源映射的情况下进行配置。

{
    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

1 个答案:

Webpack 4生产版本​​不加载图像和CSS

1 个答案:

Webpack 4生产版本不加载图像和CSS