9 месяцев назад я боролся с Webpack One:
[ Переключение с Gulp на Webpack]
ОБНОВЛЕНИЕ 30.04.20
Я должен обновить это, потому что теперь все выглядит по-другому, все, как вы знаете, очень быстро развивается в мире веб-программирования, с посылками, роллапами. и webpack теперь вы можете экспериментировать со множеством различных модульных упаковщиков.
Теперь я просто рекомендую этот стартовый пакет для любого JS Webpack. Я очень ценю помощь и постоянные обновления Брайана Старука, это помогло нам во всех моих проектах и проекте компании, в которой я работаю.
https://github.com/bstaruk/starbase< /сильный>
========================================
ОБНОВЛЕНИЕ 24.07.17 || v1
Наконец-то нам это удалось, это была простая проблема с синтаксисом:
//-- webpack.config.js
'use strict';
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractStyles = new ExtractTextPlugin('styles.bundle.css');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
let start = {
context: path.resolve(__dirname, 'src'),
entry: {
scripts: './_scripts.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'postcss-loader']
})
},
{
test: /\.(woff|woff2)$/,
use: ['url-loader'],
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
],
},
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: '[name].bundle.js',
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
plugins: [
extractStyles,
],
};
module.exports = start;//-- postcss.config.js
//-- Correct Syntaxis
module.exports = {
plugins: {
'postcss-import': {},
'precss': {},
'postcss-url': {},
'postcss-cssnext': {},
'postcss-font-magician': {},
'postcss-reporter': {},
'postcss-browser-reporter': {},
'postcss-inline-svg': {},
'postcss-urlrev': {},
'postcss-fontpath': {},
'postcss-object-fit-images': {}
}
};
//-- Wrong Syntaxis:
module.exports = {
plugins: [
("postcss-import")(),
("precss")(),
("postcss-url")(),
("postcss-cssnext")(),
('postcss-font-magician')(),
("postcss-reporter")(),
("postcss-browser-reporter")(),
('postcss-inline-svg')(),
('postcss-urlrev')(),
('postcss-fontpath')(),
('postcss-object-fit-images')()
]
};ОБНОВЛЕНИЕ 20.07.17 | v0.1a | Эта часть содержит наши первые неудачные пробы
Пока что у меня это:
'use strict';
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractStyles = new ExtractTextPlugin('styles.bundle.css');
const extractFonts = new ExtractTextPlugin('fonts.css');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
let start = {
context: path.resolve(__dirname, 'src'),
entry: {
scripts: './_scripts.js',
},
module: {
rules: [
{
test: /style\.bundle\.css/,
use: extractStyles.extract({
use: [
'style-loader',
'css-loader!',
'postcss-loader!'
],
}),
},
{
test: /fonts\.css/,
use: extractStyles.extract({
use: [
'style-loader',
'css-loader',
'postcss-loader'
],
}),
},
{
test: /\.(woff|woff2)$/,
use: ['url-loader'],
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
],
},
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: '[name].bundle.js',
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
plugins: [
extractStyles,
extractFonts,
],
};
module.exports = start;И мы получили эти предупреждения и ошибки:
Warning 1 : (node:16532) DeprecationWarning: Chunk.modules is
deprecated. Use
Chunk.getNumberOfModules/mapModules/forEachModule/containsModule
instead.
ERROR in ./_cssnext/_styles.css Module parse failed:
/Users/development/htdocs/src/_cssnext/_styles.css
Unexpected charac ter '@' (2:0) You may need an appropriate loader to
handle this file type. | /* Shared */ | @import "shared/colors.css"; |
@import "shared/typography.css"; | @ ./_scripts.js 3:14-47
Я подумал, что что-то не так с cssnext, поэтому решил добавить postcss.config.js
с:
module.exports = {
plugins: [
require("postcss-import")(),
require("precss")(),
require("postcss-url")(),
require("postcss-cssnext")(),
require('postcss-font-magician')(),
require("postcss-reporter")(),
require("postcss-browser-reporter")(),
require('postcss-inline-svg')(),
require('postcss-urlrev')(),
require('postcss-fontpath')(),
require('postcss-object-fit-images')()
]
};Но я продолжаю получать эти ошибки и предупреждения.
Что ты предлагаешь?
----
Спасибо
