webpack基础

webpack基础

网上关于webpack的文章已经不少了，本文只是从我的理解的角度进行总结和整理。

什么是webpack？

webpack能够说是一个打包工具，有下面的一些特色

• 能够进行代码转换能够把TypeScript、less转化成浏览器可执行的JavaScript、css等等；
• 能够压缩js、css、html等等，进行文件优化；
• 热更新，代码修改后会自动刷新浏览器页面； 还有代码分割、代码校验等等这些，它就是一个把咱们的开发流程变简单，提升开发效率的工具。

webpack核心概念

• Entry：入口，webpack执行构建的入口，可配置多入口；
• Output：出口，webpack输出文件存放的地方，默认是./dist；
• Module：模块，webpack会从配置的Entyr开始递归找出全部依赖的模块；
• Loader：模块转化器，把模块内容按需求转成新内容；
• Chunk：代码块，用于代码合并与分割；
• Plugin：插件，在webpack构建过程当中的特定时机注入扩展逻辑来改变构建结果；
• context：打包路径上下文，必须是绝对路径；

下面分别看看每一个概念的一些用法，要注意的是webpack4咱们不作任何设置都会默认配置，能够直接打包。

Entry（入口）

咱们在使用vue-cli 2.x初始化出来的项目，配置文件里设置了单一入口

webpack.base.conf.js

module.exports = {
  ...
  entry: './src/main.js',
  ...
}
复制代码

怎么实现多入口呢？以下

module.exports = {
  ...
  entry: ['./src/main.js', './src/vendors.js']
  ...
}

// 或者

module.exports = {
  ...
  entry: {
    main: './src/main.js',
    vendors: './src/vendors.js'
  }
  ...
}
复制代码

多入口的使用场景：分离应用程序和第三方库入口和多页面应用。

Output（出口）

基础配置

// 单一入口配置
module.exports = {
  ...
  output: {
    filename: 'bundle.[hash:5].js',
    path: path.resolve(__dirname,'dist')
  }
  ...
}

// 多入口配置
module.exports = {
  ...
  output: {
    filename: '[name].[hash:5].js',
    path: path.resolve(__dirname,'dist')
  }
  ...
}
// [name]的值就是多入口中entry的键值
复制代码

Module（模块）

webpack 模块可以以各类方式表达它们的依赖关系，webpack的模块规范能够是

• CommonJS
• esModule
• AMD
• @import
• 样式中的图片连接

Loader（模块转化器）

webpack 经过 loader 能够支持各类语言和预处理器编写模块。loader的执行顺序是从下往上，从右到左。

module: {
  ...
  rules: [
      {
        test: /\.css/,
        use:['style-loader','css-loader']
      }
  ]
  ...
}
复制代码

如上代码，执行转化css先会用css-loader（负责解析@import引入的css）转化后，再使用style-loader插入到head标签中。 在实际项目中，咱们可能会用到less、scss或者stylus等等来编写css，那咱们就要安装对应的loader进行预处理了；

• .scss node-sass sass-loader
• .less less less-loader
• .stylus stylus stylus-loader 为何都要安装两个包？能够这样理解，sass-loader调用了node-sass把scss转化成css，若是咱们是用scss，就须要在css-loader后面加上sass-loader。

Plugin（插件）

插件在于解决loader没法实现的事情，是webpack的支柱功能。插件的使用方法就是new一个实例。webpack的插件不少，咱们能够根据实际的须要进行安装使用。在咱们打包过程当中，js，css，html的压缩就是经过配置插件来完成的。这里须要提醒注意的一点是，咱们使用vue-cli初始化出来的项目，默认会压缩js，不压缩css，若是咱们本身手动加入了压缩css的插件，须要把压缩js的插件也手动加入。

Chunk和context了解就行这里不展开去讲了。