webpack 学习记录 开发环境

const { resolve } = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // html打包
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); // css单独打包

// 创建多个实例

module.exports = {
  // 入口文件
  entry: [‘./src/js/index.js‘, ‘./src/index.html‘],
  // 输出
  output: {
    // 输出文件名
    filename: ‘js/built.js‘,
    // 输出文件路径
    path: resolve(__dirname, ‘build‘),
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        // 这个loader取代style-loader作用提取js中的css成单独文件
        use: [
          MiniCssExtractPlugin.loader,
          ‘css-loader‘,
          ‘less-loader‘,
          {
            iden: ‘postcss‘,
            options: {
              ident: ‘postcss‘,
              plugins: () => [
                // postcss 的插件
                require(‘postcss-preset-env‘)(),
              ],
            },
          },
        ],
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          ‘css-loader‘,
          {
            ident: ‘postcss‘,
            plugins: () => {
              require(‘postcss-preset-env‘);
            },
          },
        ],
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: ‘url-loader‘,
        options: {
          // 图片小于8kb就会被base64处理
          limit: 8 * 1024,
          // hash前10位，文件原来扩展名
          name: ‘[hash:10].[ext]‘,
          // 关闭es6模块化,html引用采用common.js
          esModule: false,
          outputPath: ‘images‘,
        },
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: ‘html-loader‘,
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: ‘file-loader‘,
        options: {
          name: ‘[hash:10].[ext]‘,
          outputPath: ‘media‘,
        },
      },
      {
        test: /\.js$/,
        use: [‘source-map-loader‘],
        enforce: ‘pre‘,
        // 从所有 JavaScript 条目中提取现有源映射。 打包调试
        // 这包括内联源映射以及通过 URL 链接的地图。所有源地图数据都传递给 Webpack 进行处理
      },
      // js语法校验，建议配合prettier使用
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ‘eslint-loader‘,
        // 修复错误
        options: { fix: true },
      },
      // js兼容性
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ‘babel-loader‘,
        options: [
          [
            ‘@babel/preset-env‘,
            {
              // 按需加载
              useBuiltIns: ‘usage‘,
              // 指定core-js版本
              coreks: {
                version: 3,
              },
              // 考虑兼容性做到那个版本
              targets: {
                chrome: ‘60‘,
                firefox: ‘60‘,
              },
            },
          ],
        ],
      },
    ],
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: ‘./src/index.html‘,
    }),
    // 分割CSS
    new MiniCssExtractPlugin({
      filename: ‘css/built.css‘,
    }),

  ],
  mode: ‘development‘,
  devServer: {
    // 项目构建目录
    contentBase: resolve(__dirname, ‘build‘),
    // 启动gzip
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true,
    // HMR热加载 优化打包速度 当修改了webpack配置，新配置要想生效，必须重启webpack服务
    hot: true,
  },
  devtool: ‘eval-source-map‘,
};