Задать вопрос
@KHEmR
webpack

Почему не подключаются стили и скрипты в webpack config?

| app
    | css
             | styles.css
    | js
             | index.js
    | templates
             | index.pug
| build


Конфиг:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const devserver = require("./webpack/devserver");
const env = process.env.NODE_ENV || "development";

const PATHS = {
  app: path.join(__dirname, "app"),
  build: path.join(__dirname, "build")
};

const config = {
  entry: PATHS.app + "/js/index.js",

  output: {
    path: PATHS.build,
    filename: "js/[name].js"
  },

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: "pug-loader",
        options: {
          pretty: true
        }
      },

      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader:"babel-loader",
          options: { presets: ["es2015"] }
        }]
      }
    ]
  },

  devtool: env === "development" ? "inline-source-map" : "",
  
  plugins: [
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(env)
    }),

    new HtmlWebpackPlugin({
      filename: "index.html",
      chunks: ["index", "common"],
      template: PATHS.app + "/templates/index.pug"
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: "common"
    }),  
  ]
};

if (env === "production") {
  config.module.rules.push({
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      publicPath: "./build",
      fallback: "style-loader",
      use: [
        {
          loader: "css-loader",
          query: {
            modules: true,
            importLoaders: 1,
            sourceMap: true
          }
        },
        { loader: "postcss-loader" }
      ],
    }),
  });

  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

    new ExtractTextPlugin({
      filename: "./css/[name].css",
      allChunks: true
    })
  );
}
else {
  config.module.rules.push({
    test: /\.css$/,
    use: [
      "style-loader",
      "css-loader",
      "postcss-loader"
    ]
  });

  config.devServer = {
    stats: "errors-only",
    port: 9000 
  };
}

module.exports = config;


В результате получаю html файл без стилей и без подключенного main.js файла:
| build
|      | css
|      |      main.css
|      | js
|      |      common.js
|      |      main.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>App</title>
  </head>
  <body>
    <h1>New App</h1>
  <script type="text/javascript" src="js/common.js"></script></body>
</html>
  • Вопрос задан
  • 1892 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Kayun
@Kayun 
new HtmlWebpackPlugin({
      filename: "index.html",
      chunks: ["index", "common"], // у вас нет этих модулей
      template: PATHS.app + "/templates/index.pug"
    }),

Если бы вы задали входные точки объектом
config.entry = {
    index: './index.js',
    common: './common.css'
}

тогда бы у вас в хтмл подключались эти скрипты и стили.
Просто уберите chunks из HtmlWebpackPlugin и у вас все модули будут включаться в index.html.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer, Remote 🔥
Fundraise Up
от 3 800 до 6 500 $
Фронтенд разработчик
Natix
от 80 000 до 100 000 ₽
Senior Frontend Developer
Borderless360
от 3 000 до 4 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Изменить форму от конструктора сайтов
13 мая 2024, в 06:53
1800 руб./за проект
Разработка креативного дизайна для сайта
13 мая 2024, в 06:44
20000 руб./за проект
Разработка смарт контракта для сети Tron
13 мая 2024, в 05:04
2500 руб./в час
Ещё заказы