argentina - Moverse de la Webpack 1 a la Webpack 2/3

webpack version

Question

Hace 9 meses que estaba luchando con Webpack One:

[ Cambio de Gulp a Webpack ]

Pero con la reciente llegada de Webpack 3, ahora estamos dispuestos a actualizar nuestro flujo de trabajo.

ACTUALIZACIÓN 24.07.17 || v1

Al final tuvimos éxito, fue un problema de sintaxis simple:

//-- 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'')()
]
};

ACTUALIZACIÓN 20.07.17 | v0.1a | Esta parte contiene nuestras primeras pruebas sin éxito

Hasta ahora, tengo esto:

''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;

Y tenemos estas advertencias y errores:

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

Pensé que algo estaba mal con cssnext, así que decidí agregar un postcss.config.js

con:

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'')()
]
};

Pero sigo recibiendo estos errores y advertencias.

¿Que sugieres?

----

Gracias

Answer 1

Compruebe los documentos de migración de 1 a 2:

https://webpack.js.org/guides/migrating/

Migrar de 2 a 3 es fácil:

https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b