Подключение css файлов в webpack 2 (ReferenceError: ExtractTextPlugin)

366
21 июня 2017, 02:33

Пытаюсь подключить 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.

Answer 1

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

  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

  • vue-cli небольшой урок https://www.youtube.com/watch?v=kZvTUNGrHrw
  • vue webpack https://github.com/vuejs-templates/webpack
  • vue-cli github https://github.com/vuejs/vue-cli
READ ALSO
to Array from Textarea. что не так?

to Array from Textarea. что не так?

В коде можно выделить несколько ошибок:

250
Увеличение высоты поля ввода

Увеличение высоты поля ввода

Подскажите, возможно ли в textarea или input-е сделать так, чтобы при достижении правого борта (то есть границы поля), после того, как идет перенос...

221