webpack4一个简单完整开发/生产环境配置

1.安装依赖和环境

1. 安装noode.js
   根据自己的安装环境（即你的电脑系统版本）下载对应安装包，官网地址：https://nodejs.org/en/download/
2. 安装webpack环境
   需要全局和项目安装webpack和webpack-dev-server，其他插件这里就不做过多阐述大家可以根据需要自行安装就行了

npm install webpack webpack-dev-server -g
npm install webpack webpack-dev-server --save-dev

本框架的功能如下：
1、babel babel-folyfill 处理js
2、css、less，sass 自动编译成css文件并添加前缀
3、图片处理
4、开发环境页面自动刷新(热更新)
5、resolve 解析
6、css分离单压缩独引用
7、Js压缩去除多余代码
8、开发/生产环境配置

package.json devDependencies配置文件如下：

{
...

  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "babel-plugin-import": "^1.13.0",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.4.2",
    "cssnano": "^4.1.10",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.14.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  }
}

2.构建生产开发坏境

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

1.安装 webpack-merge 开始，用来合并webpack配置项

npm install --save-dev webpack-merge

在config文件夹下创建 webpack.dev.js 和 webpack.build.js 并修改 webpack.config.js，将开发与生产环境的公共配置放在webpack.config.js中：

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css 分离处理插件将css用link的方式引入，注意该插件已包含style-loader不再需要在引入style-loader处理了

const isDev = process.env.NODE_ENV === 'development'; // 通过NODE_ENV用户一个自定义的变量判断是否为开发环境
const config = {
  entry: {
    babelPolyfill: 'babel-polyfill', ,//添加了这个东西，才能完美的将ES6转码,否则Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，如：Set Map
    app: './src/index.js', // 入口文件可以多个
  }, 
  output: {
    path: path.resolve(__dirname, '../dist'), // 打包后的文件存放的地方 
    filename: './js/[name].[hash].js', // 打包后输出文件的文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader' },
        ],
      },
      {
        test: /\.less$/,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader' },
          { loader: 'less-loader' },
        ],
      },
      {
        test: /\.(scss|sass)$/, // 正则匹配以.scss和.sass结尾的文件
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'postcss-loader' },
          { loader: 'sass-loader' },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: '[name].[hash:4].[ext]',
          outputPath: './images', // 打包后图片文件输出路径
          publicPath: './images',
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: 'media/[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: 'fonts/[name].[hash:7].[ext]',
        },
      },
    ],
  },
  plugins: [
    new webpack.BannerPlugin('夜神丶'), // 为每个 chunk 文件头部添加 banner，可以不要
    new HtmlWebpackPlugin({ //本地模板文件的位置
      template: './src/index.html',
      filename: 'index.html',
      inject: true,
    }),
  ],
  resolve: { //配置项通过别名来把原导入路径映射成一个新的导入路径。
    extensions: [' ', '.js', '.jsx', '.json'],
    alias: {
      '@src': path.resolve(__dirname, '../src'),
    },
  },
  
};
module.exports = config;

webpack.build.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const merge = require('webpack-merge');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.config.js');

module.exports = merge(common, {
  mode: 'production', // 表示生产环境
  plugins: [
    new MiniCssExtractPlugin({ // 分离css
      filename: './css/[name].[hash].css',
    }),
    new OptimizeCssAssetsPlugin({ // 对分离的css文件进行压缩处理
      assetNameRegExp: /\.css$/g, // 一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
      cssProcessor: require('cssnano'), // 用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。
      cssProcessorOptions: {
        safe: true,
        discardComments: { removeAll: true },
        // map: {
        // // 不生成内联映射,这样配置就会生成一个source-map文件
        //   inline: false,
        //   // 向css文件添加source-map路径注释
        //   // 如果没有此项压缩后的css会去除source-map路径注释
        //   annotation: true,
        // },
      }, // 传递给cssProcessor的选项，默认为{}
      canPrint: true, // 一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
    }),
  ],
  optimization: { // js 压缩去除冗余代码配置
    minimizer: [
      new UglifyJsPlugin({
        cache: true, // Boolean/String,字符串即是缓存文件存放的路径
        parallel: true, // 启用多线程并行运行提高编译速度
        sourceMap: true,
        
        uglifyOptions: {
          output: {
            comments: false, // 删掉所有注释
          },
          warnings: false, // 这里的warnings一定的提出来不然会报错`warning` is not a supported option
          compress: {
            // warning: false, // 这个得注释掉
            drop_debugger: true, // 过滤debugger
            drop_console: true, // 过滤console,即使写了console,线上也不显示
          },
        }, 
      }),
      new OptimizeCssAssetsPlugin({}),
    ],
  },
});

webpack.dev.js

const merge = require('webpack-merge');
const webpack = require('webpack');
const common = require('./webpack.config.js');

module.exports = merge(common, {
  mode: 'development',
  devServer: { //webpack开发服务器配置
    hot: true,
    port: '8080',
    inline: true,
    open: true,
    overlay: true,
    // proxy: { //代理配置
    //   '/api': {
    //     target: 'xxx', 
    //     changeOrigin: true,  
    //     pathRewrite: {
    //       '^/api': ''  
    //     }
    //   }
    // }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 热更新插件 
  ],
  devtool: 'cheap-module-eval-source-map', 
});

3.配置package.json命令

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.js --progress --inline --colors --watch",
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.build.js --progress --inline --colors",
  },

到这里基本就完成webpack的一个配置啦，其他配置以及插件大家可以查看官网https://www.webpackjs.com/concepts/