webpack学习笔记（四）

描述

当前优化：配置本地开发环境（引入webpack-dev-server）、区分开发环境和生产环境

项目地址

https://gitee.com/ziyuan_xcc/learn-webpack

环境安装

tips：node-sass可能出现安装不成功的情况，请使用cnpm并且删除依赖重试；

npm install;
npm run build;

webpack.dev.config.js

路径./webpack.dev.config.js

const path = require("path");
const Webpack = require("Webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

// 获取本地ip地址
const os = require("os");
const networkInterfaces = os.networkInterfaces();
const ipv4Config = networkInterfaces[Object.keys(networkInterfaces)[0]].find(
  config => {
    return config.family === "IPv4";
  }
);
const ip = ipv4Config ? ipv4Config.address : "0.0.0.0";

module.exports = {
  // 入口(entry)
  entry: {
    vendor: path.resolve(__dirname, "src/vendor.js"),
    main: path.resolve(__dirname, "src/index.js")
  },
  // 输出(output)
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    chunkFilename: "[name].chunk.js",
    publicPath: "/"
  },
  // 启用 source map
  devtool: "cheap-module-eval-source-map",
  // webpack-dev-server配置
  devServer: {
    clientLogLevel: "warning",
    hot: true, // 热更新
    contentBase: false, //不启用
    compress: false, //开启gzip
    host: ip,
    port: 4000,
    open: true, //自动打开浏览器
    overlay: { warnings: false, errors: true },
    publicPath: "/",
    proxy: {},
    quiet: true,
    watchOptions: {
      poll: false
    }
  },
  // loader
  module: {
    rules: [
      // 加载js 使用babel做转化
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载ts
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader"
          }
        ]
      },
      // 加载 CSS
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载less
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载scss
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载sass
      {
        test: /\.sass$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载图片
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      },
      // 加载字体
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"]
      },
      //把jquery变成 $ 暴露到window
      {
        test: require.resolve("jquery"),
        use: "expose-loader?$"
      },
      //把lodash变成 _ 暴露到window
      {
        test: require.resolve("lodash"),
        use: "expose-loader?_"
      }
    ]
  },
  // 插件(plugins)
  plugins: [
    // 热替换模块
    new Webpack.HotModuleReplacementPlugin(),
    // 当开启 HMR 的时候使用该插件会显示模块的相对路径
    new Webpack.NamedModulesPlugin(),
    // 在输出阶段时，遇到编译错误跳过
    new Webpack.NoEmitOnErrorsPlugin(),
    // html处理
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html")
    }),
    // css提取
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].chunk.css"
    }),
    // 复制引用资源
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, "static"),
        to: "static",
        ignore: [".*"]
      }
    ])
  ]
};