webpack学习笔记（1）

1、为什么选择webpack

• 社区生态丰富
• 配置灵活和插件话拓展
• 官方更新迭代速度快

2、初识webpack

• webpack默认配置文件：webpack.config.js

• 可以通过webpack --config指定配置文件

  
  
  image.png
  
  

  3、安装webpack
  webpack依赖于nodejs，安装webpack前先安装nodejs和npm

• npm install webpack webpack-cli --save-dev 安装webpack
  3、基本语法
• Entry的用法
  单入口：entry是一个字符串

module.exports = {
  entry: './path/to/my/entry/file.js'
}

多入口：entry是一个对象

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
}

• Output用法
  Output用来告诉webpack如何将编译后的文件输出到磁盘
  单入口配置

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
}

多入口配置

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  }
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

• Loaders用法
  webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中
  webpack本身是一个函数，接受源文件作为参数，返回转换的结果

  
  
  image.png
  
  
  image.png

• plugins用法
  该插件用于bundle文件的优化，资源管理和环境变量注入
  作用于整个构建过程

  
  
  image.png
  
  
  image.png

• Mode用法
  Mode用来指定当前的构建环境是：production、development还是none
  设置mode可以使用webpack内置的函数，默认值为production

  
  
  image.png