一、用json配置webpack

新建webpackconfig.json文件

//webpackconfig.json
{
  "host": "localhost",
  "port": 8090,
  "open": true,
  "hot": true
}

在webpack.config.js文件中引入并使用webpackconfig.json

//引入webpackconfig.json
const WebpackConfigeJson = require('./webpackconfig.json');  

         //开发服务器
     devServer: {
     //设置服务器访问的基本目录
     contentBase: path.resolve(__dirname,'dist'),
//使用webpackconfig.json
      //设置服务器IP地址
      host: WebpackConfigeJson.host,
      //设置端口
      port:  WebpackConfigeJson.port,
      //打开浏览器
      open:  WebpackConfigeJson.open,
      //热更新
      hot:  WebpackConfigeJson.hot,
    },

二、用模块化配置webpack

新建src/modules/rules.js文件

//引入模块中使用的插件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

//导出模块
module.exports = [
  {
    test: /\.css$/,
    use: ExtractTextWebpackPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader','postcss-loader'],
      publicPath: '../'        //解决css背景图片路径问题
    })
  },
  {
    test: /\.less$/,
    use: ExtractTextWebpackPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader','less-loader'],
      publicPath: '../'        //解决css背景图片路径问题
    })
  },
  {
    test: /\.scss$/,
    use: ExtractTextWebpackPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader','sass-loader'],
      publicPath: '../'        //解决css背景图片路径问题
    })
  },
  {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 1000,            //大于1000,转图片路径;小于1000,转Base64
          outputPath: 'images',   //图片打包出去的目录
        }
      }
    ]
  }
]

在webpack.config.js中引入并使用模块：

//引入模块
const Rules = require('./src/modules/rules.js'); 

//使用模块
module: {
  rules: Rules
},

三、使用第三方库：两种方法

import引入
(1)安装：cnpm i jquery -S
(2)在需要使用jquery的文件(如index.js)中引入并使用：

impor $ from 'jquery'

$('#box').css({
    'width': '100px',
    'height': '100px',
    'background-color': 'orange'
})

通过ProvidePlugin引入(推荐此方法)
(1)安装：cnpm i jquery -S
(2)在webpack.config.js中引入：

plugins: [
  //使用jquery
  new webpack.ProvidePlugin({
    $: 'jquery'
  }),
]

(3)在需要jquery的文件(如index.js)中直接使用

//index.js
$('#box').css({
    'width': '100px',
    'height': '100px',
    'background-color': 'orange'
})

两种方法的比较：
总体而言，第二种方法优于第一种方法，理由如下：
(1)使用import引入jquery后，即使文件最终未使用jquery，webpack也会将其打包，这就会增加不必要的冗余代码，而使用ProvidePlugin引入jquery，webpack会在文件使用了jquery时才将其打包。
(2)import方法在每个使用jquery的文件中都要引入，而ProvidePlugin方法只需在webpack.confi.js中配置一次，其它文件即可直接使用jquery。

四、提取第三方（或自己想提取的）js库

提取第三方库以优化js代码主要有以下原因：

在一个页面里引入了多个库，最终所有的代码都会打包到一个文件里，如果引入的库非常之多，那文件会非常大，不利于加载。
在多个页面里都引入了同一个库，那会把这个库打包多次，造成资源浪费。

提取方式：在webpack.config.js中配置：

plugins: [
  new HtmlWebpackPlugin({
    //页面引入的模块,名称在入口配置中
    chunks: ['index','vender'],     //注意这里要引入分离的第三方库模块名称
    ......
  }),
],
optimization: {      //注意：该键名不可更改
  splitChunks: {     //注意：该键名不可更改
    cacheGroups: {   //注意：该键名不可更改
      commonjs: {
        name:'vender',    //模块名称，很重要，打包分离模块和页面引入模块需使用
        test: /\.js/
        chunks: 'initial',
      }
    }
  }
}

参考文章：Webpack 4.X 从入门到精通 - 第三方库（六）