webpack 学习记录 开发环境

webpack学习记录 

开发模式 development

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‘,
    }),

     // 压缩 css
      new OptimizeCssAssetsWebpackPlugin()


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

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

    source-map：外部

     错误代码准确信息 和 源代码的错误位置

    inline-source-map：内联

      只生成一个内联source-map

      错误代码准确信息 和 源代码的错误位置

    hidden-source-map：外部

      错误代码错误原因，但是没有错误位置

      不能追踪源代码错误，只能提示到构建后代码的错误位置

    eval-source-map：内联

      每一个文件都生成对应的source-map，都在eval

      错误代码准确信息 和 源代码的错误位置

    nosources-source-map：外部

      错误代码准确信息, 但是没有任何源代码信息

    cheap-source-map：外部

      错误代码准确信息 和 源代码的错误位置

      只能精确的行

    cheap-module-source-map：外部

      错误代码准确信息 和 源代码的错误位置

      module会将loader的source map加入

    内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

    开发环境：速度快，调试更友好

      速度快(eval>inline>cheap>...)

        eval-cheap-souce-map

        eval-source-map

      调试更友好

        souce-map

        cheap-module-souce-map

        cheap-souce-map

      --> eval-source-map  / eval-cheap-module-souce-map
      生产环境：源代码要不要隐藏? 调试要不要更友好
      内联会让代码体积变大，所以在生产环境不用内联
      nosources-source-map 全部隐藏
      hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
      --> source-map / cheap-module-souce-map

 
     eslint代码校验需要在json设置  设置为airbnb-base (如果需要定制代码样式可以去找eslint官网查看)


 "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  }

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

"devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "css-loader": "^3.6.0",
    "eslint": "^7.4.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.0",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "less-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "source-map-loader": "^1.0.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },