webpack基础介绍

自我学习，自我总结

wbpack 是什么

webpack是一种前端的资源构建工具，一个静态模块打包器（module bundler）。

在webpack看来，前端的所有资源文件（js/json/css/img/less/。。。）都应该作文模块处理

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

Wbpack的核心概念

Entry

入口（entry）指示webpack以哪一个文件为入口起点开始打包，分析构建内部依赖图

output

输出（output）指示webpack打包后资源（bundles）输出到那里去，以及如何命名

loader

loader让webpack能够去处理那些非javaScript文件（webpack自身只可以理解javaScript）

1.设置loader的优先执行,如eslint一般都是优先执行

  module: {
    rules: [
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
]}

plugins

插件（plugins）可以用于执行范围更广的任务，插件的范围包括，打包优化，压缩，一直到重新定义环境变量中的变量等

Mode

模式（mode）指示webpack使用相应的模式配置

development：能让代码本地调试运行的环境

production：能让代码优化上线运行的环境

初始化配置

初始化package.json

输入指令：npm init -y

下载并安装webpack

输入指令

npm install webpack webpack-cli -g // 全局安装

npm install webpack webpack-cli -D // 本地安装

编译打包应用

开发环境指令：webpack src/js/index.js -o build/js/build.js --mode=development

生产环境指令：webpack src/js/index.js -o build/js/build.js --mode=production

作用

• webpack可以编译打包js和json文件，能够将es6的模块语法转换为浏览器可以识别的语法（注意:这里只是指模块语法import）
• 可以压缩代码（开生产环境）

问题

• 不能编译打包css，img等文件
• 不能将js的ES6基本语法转化为es5以下的语法