webpack

概述

webpack是一个前端项目构建（打包）工具，可以解决当前web开发中面临的困境
webpack提供友好的模块化支持，以及代码压缩混淆，处理js兼容性问题，性能优化等功能。

五个核心概念

entry

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

output

output指定webpack打包后的资源bundles输出到哪里去，以及如何命名

loader

webpack只能处理js和json文件，对于那些非js文件（img/css/less），要通过loader来处理
loader让webpack能够去处理那些非JavaScript文件，功能有点类似于翻译官，将webpack不能理解的东西翻译成webpack能理解的东西

plugins

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

mode

• develop 能让代码本地调试运行的环境，配置较为简单
• production 能让代码优化上线运行的环境，配置较为复杂， 因为考虑的东西比较多

在项目中安装和配置webpack

• 新建空白文件夹，运行npm init -y命令，初始化包管理配置文件package.json
  • -y 的含义：yes的意思，在init的时候省去了敲回车的步骤，
• 新建两个文件夹 src和dist
  • src 存放项目源代码的
  • dist 项目打包之后输出的文件放到dist里边（这个文件不建也可以，运行打包后会自动生成）
• 运行npm i webpack webpack-cli -D命令，安装webpack相关的包
• 在项目根目录中，常见一个名为webpack.config.js的webpack配置文件

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

  module.exports = {
  // 编译模式
  mode:'development'
  // development模式下的打包，不会压缩打包后文件的体积
  // production模式下的打包，会压缩打包后的文件体积
  // 所以开发过程中用development，推送上线的时候用production
  }

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

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

配置打包的入口与出口

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

• 打包的入口文件为 src 文件夹下的 index.js

• 打包的出口文件为 dist 文件夹下的 main.js

  如果要修改打包的入口与出口，可以在webpack.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'  //输出文件的名称
    }
  }

  配置webpack自动打包功能

• 运行npm i webpack-dev-server -D命令，安装支持项目自动打包的工具

• 修改package.json —> scripts中的dev命令：

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

• 把index.html页面中引入的路径改成

  webpack output is served from /:表示webpack输出文件正在根目录托管。 注意： webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有放到 实际的 物理磁盘上；而是直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js； 所以在引用文件的时候，路径是直接从根目录下的，如：

我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们的项目的 根目录中，虽然我们看不到它，但是，可以认为和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js

• 重新运行npm run dev 进行打包就可以了
• 在浏览器中输入localhost:8080查看效果

配置html-webpack-plugin生成预览页面

如果不配置预览页面，访问localhost:8080的时候，会进入如下页面，不能直接打开首页。所以要配置预览页面为首页

1、运行npm i html-webpack-plugin -D，安装生成预览页面的插件
2、修改webpack.config.js文件头部区域，添加如下配置信息：

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

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

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

经过以上配置，就可以在输入localhost:8080的时候直接进入到首页

配置config中的resolve

//这样配置的好处是：我们在import模块的时候，可以这样写路径，即使我们把代码挪动位置了，它的路径也不会报错
//如果不这样对文件路径进行优化的话，就容易出现问题
resolve: {
    extensions:['.js','.jsx','json'],    //表示这几个文件后缀名可以省略不写
    alias: {
        "@": pc('src'),        //这样写 @就表示项目目录中的src这一层的路径
        $store: pc('src/store'),
        $asset: pc('src/assets'),
        $config: pc('config'),
        $utils: pc('src/utils'),
        $layouts: pc('src/layouts'),
        $controllers: pc('src/controllers'),
        $component: pc('src/components'),
        $constant: pc('src/globalConstants'),
    }
}

配置自动打包相关的参数

原本我们在打包完成后，要手动在浏览器中输入localhost:8080来访问，这比较麻烦
我们需要在项目打包完成后的一瞬间，让它自动在浏览器中打开该页面
所以需要进行如下配置：
在package.json文件中配置
//—open 打包完成后自动打开浏览器页面
//—host 配置IP地址
//—port 配置端口

loader

在实际开发中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！

loader加载器可以协助webpack打包处理特定的文件模块，比如：

• less-loader 可以打包处理 .less 相关的文件
• sass-loader 可以打包处理 .scss 相关的文件

• url-loader 可以打包处理css中与 url 路径相关的文件

  打包处理css文件

• 1、运行 npm i style-loader css-loader -D命令，安装处理css文件的loader

• 2、在webpack.config,js的module -> rules数组中，添加loader规则

注意：

• use数组中指定的loader顺序是固定的
• 多个loader的调用顺序是：从后往前调用

  modules:{
    rules:[        //这里边存放的是所有第三方文件模块的匹配规则
    {
      test:/\.css$/,        //表示匹配的文件类型，值是一个正则表达式
        use:['style-loader','css-loader']        //表示对应要调用的loader
    }
  ]
  }