二、webpack高阶学习(sourcemap, web Works, externals, tree-shaking...)

***无名小卒

已于 2022-11-02 14:14:58 修改

阅读量265

点赞数

文章标签： webpack 学习前端

于 2022-11-02 14:11:27 首次发布

本文链接：https://blog.csdn.net/xiaojiango0/article/details/126365443

版权

1. sourcemap

将生成后的代码映射到源文件当中

1)eval

设置devtool:'eval'

使用默认的eval模式，将每个module封装到eval里面包裹起来，在末尾会追加注释 //@sourceURL

2）devtool:'source-map'

生成一个sourceMap文件

3）devtool:'hidden-source-map'

和source-map一样，但不会在bundle末尾追加注释

4）devtool:'inline-source-map'

生成一个dataurl形式的SourceMap

5）devtool:'eval-source-map'

每个module会通过eval()来执行，并且生成一个dataurl形式的SourceMap

6）devtool:'cheap-source-map'

生成一个没有列信息的SourceMap文件，不包含loader的SourceMap

7）devtool:'cheap-module-source-map' （开发推荐）

生成一个没有列信息的SourceMap文件，同时loader的sourcemap被简化为只包含对应行数的

注意：生产环境一般不会开启SourceMap

原因：1. 有暴露代码的风险

2. 生产环境追求更小更轻量的bundle

2. devServer

 devServer: {
    static: path.resolve(__dirname, './dist'),
    //压缩
    compress: true,
    port: 3000,
    // 让其他人能够访问这个服务
    host: '0.0.0.0',
    // 代替任何404的静态资源响应
    historyApiFallback: true,
    headers: {
      'X-Access-Token': 'abc123'
    },
    //代理
    proxy: {
      '/api': 'http://localhost:9000'
    },
    // https: true
    http2: true,
  },

3.模块热替换与热加载

模块热替换（HMR-hot-module replacement）在应用程序运行过程中，替换，添加或删除模块，而无需重新加载整个页面

热加载：文件更新时，自动刷新我们的服务与页面

devServer: {
    hot: true,
    liveReload: true
  }

4.eslint

用来扫描代码是否符合规范的工具

npm i eslint -D

npx eslint --init

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader eslint-webpack-plugin @babel/core -D

配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  mode: 'development',

  entry: './src/app.js',

  plugins: [
    new HtmlWebpackPlugin(),
    new ESLintPlugin(),
  ],

  devServer: {
    client: {
      // 将页面的覆盖层去掉
      overlay: false,
    },
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ],

  },
}

5. 模块解析

webpack通过resolves实现了模块之间的依赖和引用。resolver帮助webpack从每个require/import语句中找到需要引入的bundle的模块代码

commonjs使用的是module.export require

es6使用的是import export default

路径简化，extensions当遇到同命名的文件时，优先选择extensions中的后缀的文件

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/app.js',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['.json', '.js', '.vue']
  }
}