Пытаюсь подключить 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.
Здесь как-то всё не так:
css.extract.js
- вообще ничего не делает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
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Подскажите, возможно ли в textarea или input-е сделать так, чтобы при достижении правого борта (то есть границы поля), после того, как идет перенос...