webpack 学习记录 开发环境

Posted 青春是首不老歌。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘,
};

 

   开发环境配置:能让代码运行

    运行项目指令:

    webpack 会将打包结果输出出去

    npx webpack-dev-server 只会在内存中编译打包,没有输出

 

  HMR: hot module replacement 热模块替换 / 模块热替换

    

    作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块)

    极大提升构建速度

    样式文件:可以使用HMR功能:因为style-loader内部实现了~

    js文件:默认不能使用HMR功能 --> 需要修改js代码,添加支持HMR功能的代码

    注意:HMR功能对js的处理,只能处理非入口js文件的其他文件。

    html文件: 默认不能使用HMR功能.同时会导致问题:html文件不能热更新了~ (不用做HMR功能)

    解决:修改entry入口,将html文件引入

 
 

  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官网查看)

1  "eslintConfig": {
2     "extends": "airbnb-base",
3     "env": {
4       "browser": true
5     }
6   }

     css 兼容性

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

 所用到NPM包

  "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"
  },

 

 
 

以上是关于webpack 学习记录 开发环境的主要内容,如果未能解决你的问题,请参考以下文章

webpack学习笔记--区分环境

webpack学习记录-区分不同环境

webpack学习记录

webpack学习记录

webpack学习记录

webpack+vue2.0+nodeJs搭建环境