一、安装 package

webapck

  1. webpack
  2. webpack-cli
  3. webpack-dev-server
  4. webpack-merge
  6. clean-webpack-plugin

javascript

  1. babel-loader
  3. @babel/core 
  4. @babel/preset-env
  5. @babel/preset-react

css/sass/less

  1. css-loader
  2. style-loader
  3. sass-loader
  4. less-loader
  5. postcss-loader
  7. mini-css-extract-plugin
  8. css-minimizer-webpack-plugin
  9. html-inline-css-webpack-plugin
  11. autoprefixer
  12. cssnano

javascript

  1. html-webpack-plugin

file

  1. file-loader
  2. url-loader
  3. raw-loader

react

  1. react
  2. react-dom

typescript

  1. typescript
  3. ts-loader

others

  1. glob
  3. lib-flexible

二、webpack 配置

配置 webpack 的时候，一般写两份配置文件，一份开发环境，一份生产环境

package.json

  1. {
  2.   "script": {
  3.     "build": "webpack",
  4.       "dev": "webpack dev --config ./webpack.dev.config.js",
  5.         "prod": "webpack --config ./webpack.prod.config.js"
  6.   }
  7. }

webpack.config.js

  1. const path = require('path')
  2. module.exports = {
  3.     entry: {
  4.       main: './src/index.js'
  5.   },
  6.   output: {
  7.       filename: '[name].bundle.js'
  8.   },
  9.   mode: 'production',
  10. }

「@浪里淘沙的小法师」