如何将 webpack 从 v1 升级到 v4？

Question

Package.json 文件（这不是完整的文件我已经清除了一些数据）

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --content-base . --history-api-fallback",
    "start": "node server.js",
    "production": "webpack -p",
    "lint": "eslint app/.; exit 0",
    "fix": "eslint --fix app/.; exit 0"
  },
  "author": "abc",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.0",
    "babel-preset-react-hmre": "^1.1.1",
    "child_process": "^1.0.2",
    "copy-webpack-plugin": "^4.1.1",
    "express": "^4.16.2",
    "firebase": "^4.6.2",
    "react": "^15.6.2",
    "react-dom": "^15.6.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "webpack-dev-server": "^1.16.5"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.7",
    "style-loader": "^0.13.2",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "browser": {
    "net": false,
    "fs": false,
    "child_process": false
  }
}

下面是我的webpack.config.babel.js文件

import path from 'path'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname+ '/app/index.html',
    filename:'index.html', 
    inject:'body',
})


const PATHS = {
    app: path.join(__dirname, 'app'),
    build: path.join(__dirname, 'dist'),
}

console.log(1, PATHS.build)

const LAUNCH_COMMAND = process.env.npm_lifecycle_event

const isProduction = LAUNCH_COMMAND === "production"
process.env.BABEL_ENV = LAUNCH_COMMAND

const productionPlugin = new webpack.DefinePlugin({
    'process.env' : {
        NODE_ENV: JSON.stringify('production')
    }
})

const base = {
    entry:[
        PATHS.app,
    ],
    output : {
        path: PATHS.build,
        filename:'/index_bundle.js',
    },
    module: {
        loaders : [
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            {test:/\.css$/, loader:'style-loader!css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'},
            {include: /\.json$/, loaders: ["json-loader"]}
        ]
    }, 
    plugins:[
        new CopyWebpackPlugin([{ from: 'lib', to: 'fontello'}])
    ],
    resolve: {
        root:path.resolve('./app')
    }
}


const developmentConfig = {
    devtool:'source-map',
    devServer:{
        contentBase:PATHS.build,
        hot:true,
        inline:true,
        progress:true,
    },
    plugins:[HtmlWebpackPluginConfig, new webpack.HotModuleReplacementPlugin()]
}

const productionConfig = {
    devtool:'cheap-module-source-map',
    plugins:[HtmlWebpackPluginConfig, productionPlugin]
}

export default Object.assign({}, base, 
    isProduction === true ? productionConfig:developmentConfig)

我已经尝试并遵循了https://webpack.js.org/migrate/3/中的文档

但是我在控制台上遇到错误

webpack：编译失败。

我在 webpack 配置文件上更改了以下更改：

module: {
        rules : [
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},

            {
                test:/\.css$/, 
                use: [
                    "style-loader",
                    "css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]"
                ]

            }
        ]
    }, 
    plugins:[
        new CopyWebpackPlugin([{ from: 'lib', to: 'fontello'}]),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        })

    ],

那么，如何在我的工作项目中将 webpack 从 1 升级到 4？

Answer 1

如果需要升级到v4（不仅仅是v3），还需要按照https://webpack.js.org/migrate/4/