0

Пытаюсь подключить css файл в webpack 2. Для этого устанавливаю "css-loader","file-loader","less-loader","sass-loader","style-loader", "extract-text-webpack-plugin","url-loader"; создаю отдельный файл css.extract.js, в него добавляю

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function(paths) {
    return {
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    include: paths,
                    use: ExtractTextPlugin.extract({
                        publicPath: '../',
                        fallback: 'style-loader',
                        use: ['css-loader','sass-loader'],
                    }),
                },
                {
                    test: /\.css$/,
                    include: paths,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: 'css-loader',
                    }),
                },
            ],
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].css'),
        ],
    };
};

И таким образом выглядит мой web pack.config.js

const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
require("extract-text-webpack-plugin");
require('./css.extract');


module.exports = {
    entry:
        './zero.js',
    output: {
        filename: "./main.js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.ProvidePlugin({
            Vue: ['vue/dist/vue.esm.js', 'default']
        }),
        new UglifyJSPlugin(),
        new ExtractTextPlugin("styles.css")
    ]
};

После запуска происходит ошибка Users/jussia/sites/Jussiadev/webpack/webpack.config.js:22 new ExtractTextPlugin("styles.css") ^

ReferenceError: ExtractTextPlugin is not defined at Object. (/Users/jussia/sites/Jussiadev/webpack/webpack.config.js:22:13) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at requireConfig (/Users/jussia/sites/Jussiadev/webpack/node_modules/webpack/bin/convert-argv.js:96:18) at /Users/jussia/sites/Jussiadev/webpack/node_modules/webpack/bin/convert-argv.js:109:17 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

1 ответ 1

0

Здесь как-то всё не так:

  1. css.extract.js - вообще ничего не делает
  2. в конфиге webpack.config.js нет правил

Строки

require("extract-text-webpack-plugin"); // => const ExtractTextPlugin = ...
require('./css.extract'); // => const cssConfig = require('./css.extract')(/* пути */)

не имеют никакой практической пользы

Для объединения конфигураций webpack из разных файлов существует webpack-merge

Начните с простой конфигурации, в одном файле, будет более понятно:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './zero.js',
  output: { filename: 'main.js' },
  module: {
    rules: [
      /* правила обработки для вашего приложения */
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.ProvidePlugin({
      Vue: ['vue/dist/vue.esm.js', 'default']
    }),
    new UglifyJSPlugin(),
    new ExtractTextPlugin("styles.css")
  ]
}

И важное дополнение, если вы хотите работать с Vue, то должны знать и использовать готовые шаблоны проектов. Эти шаблоны можно изучить и понять, как правильно настроить webpack

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.