Webpack的使用——Webpack的初次使用

生产环境打包：

    webpack ./src/index.js -o ./dist/dist.js --mode=production

开发环境打包：

    webpack ./src/index.js -o ./dist/dist.js --mode=development

1. webpack只能处理js、json资源，不能直接处理样式、图片等资源
2. webpack的默认配置可以将ES6的模块化转化为浏览器能识别的模块化
3. 生产环境打包会压缩js代码

Webpack配置的基本结构

webpack.config.js
/**
 * 所有的构建工具都是基于nodeJS平台运行的，模块化默认采用的是CommonJS。
 * 但是webpack默认配置中支持ES6模块化
 */
const path = require('path')
module.exports = {
  // 打包入口文件
  entry: './src/index.js',
  output: {
    // __dirname nodejs中的变量，表示 当前文件所在的目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js'
  },
  // loader 的配置
  module: {
    rules: []
  },
  // plugin 的配置
  plugins: [],
  // 模式
  mode: 'development'
  // mode:"production",
}