loader的执行顺序：从右到左(从下到上)
npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D
pstyle-loader 动态创建 style 标签,将 css 插入到 head 中.
css-loader 负责处理 @import 等语句。
postcss-loader 和 autoprefixer,自动生成浏览器兼容性前缀 —— 2020了,应该没人去自己徒手去写浏览器前缀了吧
less-loader 负责处理编译 .less 文件,将其转为 css

  如果index.html需要引入本地图片,html-withimg-loader

publicPath配置意义？

  cleanOnceBeforeBuildPatterns:['**/*', '!dll', '!dll/**'] //不删除dll目录下的文件

  npm install copy-webpack-plugin -D
  new CopyWebpackPlugin([
      {
          from: 'public/js/*.js',
          to: path.resolve(__dirname, 'dist', 'js'),
          // flatten 这个参数,设置为 true,那么它只会拷贝文件,而不会把文件夹路径都拷贝上
          flatten: true,
      }
  ], {
      ignore: ['other.js']
  })

new webpack.ProvidePlugin({
    React: 'react',
    Component: ['react', 'Component'],
    Vue: ['vue/dist/vue.esm.js', 'default'],
    $: 'jquery',
    _map: ['lodash', 'map']
})
另外,就是如果你项目启动了 eslint 的话,记得修改下 eslint 的配置文件,增加以下配置：
{
    "globals": {
        "React": true,
        "Vue": true,
        //....
    }
}

npm install mini-css-extract-plugin -D
mini-css-extract-plugin 和 extract-text-webpack-plugin 相比:
异步加载
不会重复编译(性能更好)
更容易使用
只适用CSS

  要支持 import() 语法，需要增加 babel 的配置，安装依赖:
  npm install @babel/plugin-syntax-dynamic-import -D
  .babelrc的配置
  {
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ],
        "@babel/plugin-syntax-dynamic-import"
    ]
  }

首先配置 devServer 的 hot 为 true
并且在 plugins 中增加 new webpack.HotModuleReplacementPlugin()
在入口文件中新增:
if(module && module.hot) {
    module.hot.accept()
}

HtmlWebpackPlugin
plugins: [
  new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html', //打包后的文件名
      chunks: ['index']
  }),
  new HtmlWebpackPlugin({
      template: './public/login.html',
      filename: 'login.html', //打包后的文件名
      chunks: ['login']
  }),
]

resolve 配置 webpack 如何寻找模块所对应的文件。

resolve.modules 配置 webpack 去哪些目录下寻找第三方模块，默认情况下，只会去 node_modules 下寻找
resolve: {
  modules: ['./src/components', 'node_modules'] //从左到右依次查找
}

resolve: {
    alias: {
        'react-native': '@my/react-native-web' //这个包名是我随便写的哈
    }
}
import { View, ListView, StyleSheet, Animated } from 'react-native';

    npm install mocker-api -D