初识webpack

Posted 不作声

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识webpack相关的知识,希望对你有一定的参考价值。

本质上,webpack是一个现代javascript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。

在开始前,需要先了解webpack中的四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)

  • entry:应该使用哪个(哪些)模块来作为构建其内部依赖图的开始。
  • output:输出所创建的bundles,以及这些文件的命名。
  • loader:将所有类型的文件转换为webpack能够处理的有效模块。
  • plugins:打包优化、压缩、重新定义环境中的变量等。

entry points

标准用法:entry: { [entryChunkName: string]: string | Array<string> }

entry: {
  pageOne: ‘./src/pageOne/index.js‘,
  pageTwo: ‘./src/pageTwo/index.js‘,
  pageThree: ‘./src/pageThree/index.js‘,
}

output

output选项可以控制webpack如何向硬盘写入编译文件。

output的值是一个对象,包括filenamepathfilename输出文件的文件名,path为输出目录的绝对路径。

output: {
  filename: ‘bundle.js‘,
  path: ‘/home/project/public/assets‘,
}

此配置将一个bundle.js文件输出到/home/project/public/assets目录中。

loader

loader用于对模块的源代码进行转换。

使用loader加载CSS文件:

npm install --save-dev css-loader

将Typescript转换为JavaScript:

npm install --save-dev ts-loader

在配置文件中进行配置:

// webpack.config.js
module: {
  rules: [
    { test: /.css$/, use: ‘css-loader‘ },
    { test: /.ts$/, use: ‘ts-loader‘ },
  ]
}

在webpack配置中也支持一种文件引入多个loader:

// webpack.config.js
module: {
  rules: [
    { test: /.css$/, 
      use: [
        { loader: ‘style-loader‘ },
        { loader: ‘css-loader‘ }
        }
      ] 
    }
  ]
}

插件

由于插件可以携带参数/选项,所以在webpack配置中,向plugins传入new实例。

// webpack.config.js
const webpack = require(‘webpack‘);

const cnfig = {
  plugins: [
    new webpack.BannerPlugin(‘版权所有,翻版必究‘)
  ]
}

模块热替换HMR

模块热替换功能会在应用程序中替换、添加或删除模块,而无需加载整个页面。主要通过以下方式来显著加快开发速度:

  • 保留在完全重新加载页面时丢失的应用程序状态。
  • 只更新变更内容,以节省宝贵的开发时间。
  • 调整样式更加快速,几乎相当于在浏览器调试器中更改样式。

技术图片

以上是关于初识webpack的主要内容,如果未能解决你的问题,请参考以下文章

webpack4.0(01.基础配置和初识)

初识webpack

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识webpack与webpack环境搭建

初识webpack与webpack环境搭建