webpack4 升级迁移的实现(2)

... const plugins = require('./plugins'); module.exports = { ... plugins: [ // plugins.ExtractTextPlugin, plugins.MiniCssExtractPlugin, plugins.HtmlWebpackPlugin ] };

处理 svg 或者 图片资源

npm i image-webpack-loader url-loader base64-inline-loader --save-dev

修改 webpack/loader.js 中的配置：

const svgLoader = { test: /\.svg$/, use: [ { loader: 'image-webpack-loader', }, { loader: 'base64-inline-loader', } ], }; const imageLoader = { test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=1024&name=images/[name]_[hash].[ext]' };

同理可以需要在webpack 中修改对应文件；

配置 devServer

npm i webpack-dev-server --save-dev

在新的配置中我们可以在 devServer 中配置我们起一个服务器的端口号和网络控制;

module.exports = { ... devServer: { port: 9000, headers: { 'Access-Control-Allow-Origin': '*' }, hot: true, inline: true, progress: true, quiet: true, compress: true, disableHostCheck: true, }, }

设置 package.json 的命令

{ "scripts": { "build": "webpack -p --config ./webpack/webpack.config.js --display-error-details", "dev": "webpack-dev-server --config ./webpack/webpack.config.js --display-error-details" } }

差不多就这样子可以完成基本的配置了；