webpack一直再更新，webpack作为前端构建工具，有它 的优势性。每次更新webpack为了让这个工具使用起来更加方便，性能优化。在webpack3.x时，在打包压缩时，必须得使用额外的插件，配置虽然不是那么麻烦有官网，但这是一个耗时耗力的事情。webpack4.x就解决了额外插件问题，只需要安装一个webpack-cli，无需过多配置压缩插件，在webpack-cli中集成很多webpack中的额外插件，故配置起来，那就会省点力气。不过第一次配置4.x还是得需要阅读官方文档，从整体讲，配置时的代码减少了。
接下来我们一步一步的配置4.x的代码；
我们将生产环境插件，本地环境插件，公共插件分割开来，这时我们得需要一个插件 webpack-merge ——是将本地开发代码和生产环境代码分隔开，这也是提升性能的一种方式。
先看webpck.common.js文件中的各部分的插件；
像引入核心模块path、wnpack这些基础模块就不再赘述，不懂就去看看node官网和webpack官网；在entry入口文件采用了多入口方式，将开发代码和第三方引入的插件分割开，分批打包压缩，对代码构建的一次优化处理，接下来请看本分代码：
entry: {
app: ['./app/index.jsx'],
jquery: ['jquery'],
antd: ['antd-mobile'],
common: ['babel-polyfill', 'whatwg-fetch']
} 出口文件配置：
output: { //出口文件
filename: 'js/[name].[hash].js',
path: path.resolve(__dirname, 'dist'),
chunkFilename: 'js/[name].js'
}将js文件文件打包到指定文件夹[dist]中;
resolve模块:如何寻找模块对应的文件;
webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。
resolve.extensions:根据查找的文件自动补全对应的后缀名，以确保该文件存在。
resolve.alias:自动补全文件路径；
当然还有 mainFields，descriptionFiles，enforceExtension，modules等，这里就不过多赘述，如想要对这方面了解更多，点击进入这个链接：https://segmentfault.com/a/1190000013176083?utm_source=tag-newest
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
Component: path.resolve(__dirname, 'app/component/'), //代替模块路径
Style: path.resolve(__dirname, 'app/style/'),
Router: path.resolve(__dirname, 'app/router/'),
Src: path.resolve(__dirname, 'app/src/'),
Image: path.resolve(__dirname, 'app/image/')
}
}module模块，module.rules文件匹配规则的配置。
jsx代码，图片，字体标等的识别解析。
rules: [{
test: /\.(jsx|js)$/,
use: {
loader: 'babel-loader',
},
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/i,
use: {
loader: "file-loader",
options: {
limit: 2048,
name: path.posix.join('img/[name].[hash:8].[ext]')
}
}
},
{
test: /\. (woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]在上面没有看到css文件配置，是因为我将其进行分开处理，在生产环境对css与js代码进行分割处理，本地开发，没有进行这样的处理。
webpack.prod.js生产环境的代码分割插件：optimization和ExtractTextPlugin；这里配置的是scss预处理器，less也是可以配置，请自行解决。
如何配置，请阅读代码：
module: {
rules: [{
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
url: true, //flase表示无法解析图片路径，
minimize: true,
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}]
},
optimization: { //代码分割插件
minimize: true,
splitChunks: {
chunks: 'async', //all对所有文件处理，async异步导入文件处理，initial只对入口文件处理。
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
// flagIncludedChunks: true,
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
plugins: [
new webpack.HashedModuleIdsPlugin(),
new ExtractTextPlugin({
filename: (getPath) => {
return getPath(path.posix.join('[name].css')).replace('js', 'css');
},
allChunks: true
})
]当然在webpack.config.js中还存在像清除插件CleanWebpackPlugin、html模板插件HtmlWebpackPlugin、new webpack.ProvidePlugin引入全局模块插件、 new webpack.DefinePlugin设置全局变量插件，此处就不做过多的叙述。
接下来就是webpack.dev.js;这个当然要讲到本地服务，devServe，本地代理解决跨域问题，再加上热更新。
proxy本地代理解决跨域,HotModuleReplacementPlugin热跟新插件等
devServer: {
contentBase: './dist',
hot: true,
port: 3000,
inline: true,
host: 'localhost',
//host:'http://screen.kinlink.cn/',
historyApiFallback: true,
noInfo: false,
proxy: { //通过代理解决本地跨域
'/api': {
target: '/api/',
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
// 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
}
}
}
},
new webpack.HotModuleReplacementPlugin()上面讲诉的是webpack配置，如何react中进行使用，接下来得配置一下.babelrc文件；关键就是presets属性的设置，webpack3.x时使用es2015没有任何问题，但是webpack4.x就不行。故，看代码：
{
"presets":["es2017","react"],
"plugins": [
["import", { libraryName: "antd-mobile", style: "css" }]
]
}
plugins:引入配置的antd组件的样式。
本人github学习代码：https://github.com/scottdao/scottPackaging/tree/master/react-webpack4.0；
参考文档：1.https://blog.zfanw.com/webpack-tutorial/#%E6%89%93%E5%8C%85；