Webpack 4 常用配置从零入门指南

const path = require('path')

module.exports = {
  // mode 可选 development 或 production ，默认为后者
  // production 会默认压缩代码并进行其他优化（如 tree shaking）
  mode: 'development',
  entry: path.join(__dirname, 'src', 'index'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}

 "scripts": {
  "build": "webpack"
 },

// webpack.common.js 公共的配置
const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')
module.exports = {
  entry: path.join(srcPath, 'index')
}

// webpack.dev.js 运行代码的配置（该文件暂时用不到，先创建了，下文会用到）
const path = require('path')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')
module.exports = smart(webpackCommonConf, {
  mode: 'development'
})

// webpack.prod.js 打包代码的配置
const path = require('path')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')
module.exports = smart(webpackCommonConf, {
  mode: 'production',
  output: {
    filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳
    path: distPath,
    // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
  }
})

 "scripts": {
  "build": "webpack --config build/webpack.prod.js"
 },

// 引入 webpack
const webpack = require('webpack')

// 增加 webpack 配置
  plugins: [
    new webpack.DefinePlugin({
      // 注意：此处 webpack.dev.js 中写 'development' ，webpack.prod.js 中写 'production'
      ENV: JSON.stringify('development')
    })

// 正确写法一
export function fn() {
  console.log('fn')
}

export const name = 'b'
// 正确写法二
function fn() {
  console.log('fn')
}
const name = 'b'
export {
  fn,
  name
}

// 错误写法
function fn() {
  console.log('fn')
}
export default {
  fn,
  name: 'b'
}

<!DOCTYPE html>
<html>
<head><title>Document</title></head>
<body>
  <p>this is index html</p>
</body>
</html>

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(srcPath, 'index.html'),
      filename: 'index.html'
    })
  ]

devServer: {
  port: 3000,
  progress: true, // 显示打包的进度条
  contentBase: distPath, // 根目录
  open: true, // 自动打开浏览器
  compress: true // 启动 gzip 压缩
}

  devServer: {
    // 设置代理
    proxy: {
      // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
      '/api': 'http://localhost:3000',

      // 将本地 /api2/xxx 代理到 localhost:3000/xxx
      '/api2': {
        target: 'http://localhost:3000',
        pathRewrite: {
          '/api2': ''
        }
      }
    }

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: ['babel-loader'],
        include: srcPath,
        exclude: /node_modules/
      },
    ]
  },

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-classes"
  ]
}

// webpack 中 source map 的可选项，是情况选择一种：

// devtool: 'source-map' // 1. 生成独立的 source map 文件
// devtool: 'eval-source-map' // 2. 同 1 ，但不会产生独立的文件，集成到打包出来的 js 文件中
// devtool: 'cheap-module-source-map' // 3. 生成单独的 source map 文件，但没有列信息（因此文件体积较小）
devtool: 'cheap-module-eval-source-map' // 4. 同 3 ，但不会产生独立的文件，集成到打包出来的 js 文件中

  module: {
    rules: [
      { /* js loader */ },
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader'] // loader 的执行顺序是：从后往前
      }
    ]
  },

      {
        test: /\.less$/,
        loader: ['style-loader', 'css-loader', 'less-loader'] // 增加 'less-loader' ，注意顺序
      }

      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader', 'postcss-loader'] // 增加 'postcss-loader' ， 注意顺序
      }

module.exports = {
  plugins: [require('autoprefixer')]
}

// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 增加 webpack 配置
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: [
          MiniCssExtractPlugin.loader, // 注意，这里不再用 style-loader
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/main.[contentHash:8].css'
    })
  ]

// 引入插件
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// 增加 webpack 配置
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },

      {
        test: /\.(png|jpg|gif)$/,
        use: 'file-loader'
      }

      {
        test: /\.html$/,
        use: 'html-withimg-loader'
      }

      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            // 小于 5kb 的图片用 base64 格式产出
            // 否则，依然延用 file-loader 的形式，产出 url 格式
            limit: 5 * 1024,

            // 打包到 img 目录下
            outputPath: '/img/',

            // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
            // publicPath: 'http://cdn.abc.com'
          }
        }
      },

  entry: {
    index: path.join(srcPath, 'index.js'),
    other: path.join(srcPath, 'other.js')
  },
  output: {
    filename: '[name].[contentHash:8].js', // [name] 表示 chunk 的名称，即上面的 index 和 other
    path: distPath
  },

  plugins: [
    // 生成 index.html
    new HtmlWebpackPlugin({
      template: path.join(srcPath, 'index.html'),
      filename: 'index.html',
      // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
      chunks: ['index'] // 只引用 index.js
    }),
    // 生成 other.html
    new HtmlWebpackPlugin({
      template: path.join(srcPath, 'other.html'),
      filename: 'other.html',
      chunks: ['other'] // 只引用 other.js
    }),

  optimization: {
    // 分割代码块
    splitChunks: {
      // 缓存分组
      cacheGroups: {
        // 公共的模块
        common: {
          chunks: 'initial',
          minSize: 0, // 公共模块的大小限制
          minChunks: 2 // 公共模块最少复用过几次
        }
      }
    }
  },

  optimization: {
    // 分割代码块
    splitChunks: {
      // 缓存分组
      cacheGroups: {
        // 第三方模块
        vendor: {
          priority: 1, // 权限更高，优先抽离，重要！！！
          test: /node_modules/,
          chunks: 'initial',
          minSize: 0, // 大小限制
          minChunks: 1 // 最少复用过几次
        },

        // 公共的模块
        common: {
          chunks: 'initial',
          minSize: 0, // 公共模块的大小限制
          minChunks: 2 // 公共模块最少复用过几次
        }
      }
    }
  },

setTimeout(() => {
  import('./dynamic-data.js').then(res => {
    console.log(res.default.message) // 注意这里的 default
  })
}, 1500)

  module: {
    noParse: /jquery|lodash/, // 不解析 jquery 和 lodash 的内部依赖

  plugins: [
    new webpack.IgnorePlugin(/\.\/locale/, /moment/), // 忽略 moment 下的 /locale 目录

import moment from 'moment'
import 'moment/locale/zh-cn' // 手动引入中文语言包
moment.locale('zh-cn')
const r = moment().endOf('day').fromNow()
console.log(r)

  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery'
    }),

  externals: {
    jquery: 'jQuery'
  },

  resolve: {
    alias: {
      Utilities: path.join(srcPath, 'utilities')
    }
  },

  resolve: {
    extensions: [".js", ".json"]
  },

// 引入插件
const CleanWebpackPlugin = require('clean-webpack-plugin')

// 增加配置
  plugins: [
    new CleanWebpackPlugin(), // 默认清空 output.path 目录

// 引入插件
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 增加配置
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.join(srcPath, 'doc'), // 将 src/doc 拷贝到 dist/doc
        to: path.join(distPath, 'doc')
      }
    ]),

  plugins: [
    new webpack.BannerPlugin('by github.com/wangfupeng1988 \r'),