从Webpack 1移到Webpack 2/3

Question

9个月前，我在与Webpack One挣扎：

[Switching from Gulp to Webpack]

但随着最近Webpack 3的到来，现在我们愿意更新我们的工作流程。

更新24.07.17 || V1

我们终于成功了，这是一个简单的语法问题：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新20.07.17 | v0.1a |此部分包含我们的首次试用但未成功

到目前为止，我有这个：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我们得到了这个警告和错误：

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

使用：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我一直收到这个错误和警告。

你有什么建议？

----

谢谢