webpack的安装与基本配置

入门介绍

---

• 自动化构建工具：
  • gulp
  • webpack
• web开发存在的困境
  • 文件依赖关系错综复杂
  • 静态资源请求效率低
  • 模块化支持不友好
  • 浏览器对高级JavaScript特性兼容程度低
• 什么是webpack？
  • 概述
    • webpack是一个流行的前端项目构建工具(打包工具),提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能。
    • 目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的
    • 构建图分析
      • 立方体代表webpack的logo
      • 箭头代表打包的过程
      • 左侧表示没有经过webpack打包前构建之前的项目状态
      • 右侧代表经过打包构建之后的项目状态

基本使用

---

1. 列表隔行变色项目
   • 新建项目空白目录，并运行npm init -y，初始化包管理配置化文件package.json
   • 新建src源代码目录
   • 在src --> index.html 首页
   • 初始化首页基本的结构
   • 运行npm install jquery -s命令,安装jQuery
   • 通过模块化的形式，实现列表隔行变色
2. 在项目中安装和配置webpack
   • 运行npm install webpack webpack-cli -D，安装webpack相关的包
   • 在项目根目录中，创建名为webpack.config.js 的webpack配置文件
   • 在webpack的配置文件中，初始化如下基本配置：

         module.exports = {
             mode:'development' //production 为上线模式 指定构建模式 此为开发模式
         }
     

   • 在pack.json 配置文件中的script节点下，新增dev脚本

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

   • 在终端中运行npm run dev命令，启动webpack进行项目打包
   • webpack配置文件中两种模式的不同点在于production对index.js进行了压缩
3. 配置打包的入口与出口
   • webpack的4.x版本中默认约定：
     • 入口文件：src --> index.js
     • 出口文件：dist --> main.js
     • 如果要修改打包的入口与出口，可以在weback.config.js中新增如下配置

           const path = require('path')  // 导入node.js中专门操作路径的模块
           module.exports = {
               entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
               output: {
                   path: path.join(__dirname, './dist'), // 输入文件的存放路径
                   filename: 'bundle.js' // 输出文件的名称
               }
           }
       

4. 配置自动打包功能
   • 每次修改完代码，都需要看到最新的效果，每次都需要执行打包命令npm run dev
   • 实现：
     • 运行npm i webpack-dev-server -D 安装支持自动化打包的工具
     • 修改package.json --> script中的dev命令如下:

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

     • 将 src --> index.html中,script脚本的引用路径，修改为"/bundle.js"
     • 运行npm run dev 命令，重新进行打包
     • 在浏览器中访问http://localhost:8080/，查看自动打包效果
   • webpack-dev-server会启动一个实时打包的 http 服务器，实时监听代码变化，进行实时编译，从而页面呈现。
   • webpack-dev-server打包生成的输出文件，默认放到项目根目录中，而且是虚拟的、看不见的
5. 配置html-webpack-plugin生成预览页面
   • 运行 npm install html-webpack-plugin -D命令，安装生成预览页面的插件
   • 修改 webpack.config.js 文件头部区域，添加如下配置信息：

         // 导入生成预览页面的插件，得到一个构造函数
         const HtmlWebpackPlugin = require('html-webpack-pluguin')
         const htmlplugin = new HtmlWebpackPlugin({
             template: './src/index.html', // 指定要用到的模板文件
             filename: 'index.html' //指定生成的文件的名称，该文件存在于内存中在目录中不显示
         })
         
     

   • 修改 webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

         module.exports = {
             plugins: [ htmlPlugin ]  // plugins数组是webpack打包期间会用到的一些插件列表
         }
     

6. 配置自动打包的相关参数
   • 配置 package.json

         "scripts": {
             "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080" 
         }