webpack

1、概述

webpack 是一个流行的 前端项目构建工具（打包工具）。

webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大功能。

 

2、基本使用

1. 创建列表隔行变色项目

①  新建空白项目，并运行  npm init -y 命令，初始化管理配置文件 package.json

② 新建 src 源代码目录

③ 新建 src -> index.js 首页

④ 初始化首页基本结构

⑤ 运行 npm install jquery -S 命令，安装 jQuery

⑥ 通过模块的形式，实现列表隔行变色效果

 

浏览器无法识别 import $ from 'jQuery'，需要用到 webpack

 

2. 在项目中安装和配置 webpack

webpack-cli与webpack版本不匹配,导致安装错误

npm install webpack@4.30.0 -D  npm install webpack-cli@3.3.2 -D

① 运行 npm install webpack-cli -D 命令，安装 webpack 相关的包

② 在项目根目录，创建名为 webpack.config.js  的 webpack 配置文件

③ 在 webpack 的配置文件中，初始化如下基本配置：

    module.exports = {

        // mode 用来指定构建模式

        mode: 'development'  // development production 开发/生产

    }

④ 在 package.json 的配置文件中的 script 节点下，新增 dev 脚本如下：

    "script": {

      "dev" : "webpack"  // script 节点下的脚本，可以通过  npm run 执行

⑤ 在终端运行 npm run dev 命令，启动 webpack 进行项目打包。

 

3. 配置打包的入口与出口

webpack 的 4.x 版本中默认约定：

• 打包的 入口文件 为 src  -> index.js
• 打包的 输出文件 为 dist -> main.js

如果要修改打包的入口与出口