[原]webpack 升级 ４.25

阅读更多

1. package 的内容

 

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "1.6.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^3.1.0",
    "babel-preset-stage-2": "6.24.1",
    "chalk": "^2.3.0",
    "chokidar": "^1.7.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-hot-loader": "^1.3.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "3.0.2",
    "mini-css-extract-plugin": "^0.4.4",
    "file-loader": "2.0.0",
    "fs": "0.0.1-security",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "3.2.0",
    "json-server": "^0.12.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.3",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.6",
    "server-destroy": "^1.0.1",
    "source-list-map": "^2.0.0",
    "style-loader": "^0.18.2",
    "uglify-js": "^3.0.28",
    "url-loader": "^0.5.9",
    "webpack": "4.25.1",
    "webpack-dev-server": "^3.1.0",
    "webpack-cli": "3.1.2"
  }

 

 

2. 如果用了 html-webpack-plugin 要加一个配置, 否则报错 为什么没仔细看..

plugins: [
            new webpack.HotModuleReplacementPlugin(),

            new webpack.NamedModulesPlugin(),
            // extractCSS,
            // extractSCSS,
            new MiniCssExtractPlugin({
                // Options similar to the same options in webpackOptions.output
                // both options are optional
                filename: devMode ? '[name].css' : '[name].[hash].css',
                chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
            }),
            new HtmlWebpackPlugin(
                {
                    inject: true,
                    template: './public/index.html',
                    chunksSortMode: 'none'
                }
            ),
            new CopyWebpackPlugin([
                { from: './public/img', to: 'public/img' },
                // { from: './public/spec.json', to: 'public/spec.json' },
                // { from: './public/swagger.json', to: 'public/swagger.json' },
                { from: './public', to: 'public' }
            ],
                { copyUnmodified: false }
            )
        ]

 
3. 如果用了 extract-text-webpack-plugin 换成　mini-css-extract-plugin 比较简单，　类似这样

{
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader"
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader",
                        {
                            loader: "less-loader",
                            options: { modifyVars: theme } // no need to JSON.stringify()
                        },
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        "css-hot-loader",
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: { alias: { '../img': '../public/img' }, module: false }
                        }
                        , "sass-loader",
                    ]
                },