迁移到 Webpack

Question

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

[从 Gulp 切换到 Webpack ]

更新 30.04.20

我必须更新这一点，因为现在一切都不同了，正如你所知，在 Web 编程世界中，一切都发展得非常快，包括 Parcel、Rollup。和 webpack 现在您可以尝试许多不同的模块捆绑器。

现在我将向任何 JS Webpack 推荐这个入门包。我非常感谢Brian Staruk的帮助和不断更新，这对我们所有的项目以及我工作的公司的项目都有帮助。

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

更新 2017 年 7 月 20 日 | 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

和：

Warning 1 : (node:16532) DeprecationWarning: Chunk.modules is
deprecated. Use
Chunk.getNumberOfModules/mapModules/forEachModule/containsModule
instead.

但我不断收到此错误和警告。

你有什么建议？

----

谢谢