快速配置webpack

// package.json{ ?"name": "test", ?"version": "1.0.0", ?"description": "simple project", ?"private": true, ?"scripts": { ???"build": "webpack --config webpack.config.js --color --progress --mode=production", ???"start": "webpack-dev-server --open --mode=development" ?}, ?"author": "yangxiang", ?"license": "ISC", ?"devDependencies": { ???"babel-core": "^6.26.3", ???"babel-loader": "^7.1.5", ???"babel-preset-env": "^1.7.0", ???"copy-webpack-plugin": "^4.5.2", ???"css-loader": "^1.0.0", ???"html-webpack-plugin": "^3.2.0", ???"uglifyjs-webpack-plugin": "^1.3.0", ???"webpack": "^4.17.2", ???"webpack-cli": "^3.1.0", ???"webpack-dev-server": "^3.1.7" ?}, ?"dependencies": { ???"mockjs": "^1.0.1-beta3" ?}}

// webpack.config.jsconst path = require(‘path‘);const webpack = require(‘webpack‘);const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);let webpackConfig = { ???entry: ‘./index.js‘, ???output: { ???????filename: ‘main.js‘, ???????path: path.resolve(__dirname, ‘dist‘) ???}, ???module: { ???????rules: [{ ???????????test: /\.js$/, ???????????exclude: /node_modules/, ???????????use: { ???????????????loader: ‘babel-loader‘, ???????????????options: { ???????????????????presets: [‘env‘] ???????????????} ???????????} ???????}, { ???????????test: /\.(png|jpe?g|gif)(\?.*)?$/, ???????????use: [{ ???????????????loader: ‘url-loader‘, ???????????????options: { ???????????????????limit: 4096, ???????????????????name: ‘img/[name].[hash:8].[ext]‘ ???????????????} ???????????}] ???????}, { ???????????test: /\.css$/, ???????????use: [‘style-loader‘, ‘css-loader‘] ???????}] ???}, ???plugins: [ ???????new HtmlWebpackPlugin({ ???????????template: ‘./index.html‘ ???????}) ???]};if (process.env.NODE_ENV == "development") { ???// 开发模式下的配置 ???webpackConfig.devServer = { ???????hot: true, ???????port: 8888 ???}; ???webpackConfig.plugins.concat( ???????new webpack.HotModuleReplacementPlugin(), ???????new webpack.NamedModulesPlugin(), ???????new webpack.NoEmitOnErrorsPlugin() ???)} else { ???// 生产模式下的配置 ???webpackConfig.plugins.concat( ???????new UglifyJsPlugin({ ???????????uglifyOptions: { ???????????????compress: { ???????????????????warnings: false ???????????????} ???????????}, ???????????sourceMap: true, ???????????parallel: true ???????}) ???)}module.exports = webpackConfig;