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