webpack基本使用教程

定义：

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

关键词：模块化，打包

作用

简化前端开发工作

核心概念

• 入口：待打包文件所在路径
• 输出：文件打包后输出的路径
• 加载器（loader）：处理非js资源
• 插件（plugin）：扩展功能

webpack.config.js：

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: path.join(__dirname,'./src/main.js'),  //入口,main.js所在的绝对路径
  output: {  //出口
    path: path.join(__dirname,'./dist'),  //main.js的输出路径
    filename: 'bundle.js'  //main.js打包后的文件名
  },
  mode: "development",  //开发模式
  devServer: {  //插件,作用是模拟一个服务器，将文件放到服务器环境中运行
    // contentBase: path.join(__dirname,'./src'),
    open: true,
    port: 3002
  },
  plugins: [  //插件
    new htmlWebpackPlugin({  //作用：将js文件自动引入index.html
      template: path.join(__dirname,'./src/index.html')
    })
  ],
  module : {
    rules: [  //加载器
      {test: /\.css$/, use: ['style-loader','css-loader']},//css加载器，从右往左加载
      {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}
    ]
  } 
}

使用步骤

命令行方式配置

1.生成 package.json, 命令 : npm init -y，注意文件夹名不能为英文或webpack
2.安装 : npm i -D webpack webpack-cli

• -D是--save -dev的简写，表示安装的包是在项目开发期间使用，不写默认为在上线期间使用
• webpack是指安装webpack的核心包
• webpack-cli包含了一些在终端使用的命令
  3.在 package.json的scripts中,添加脚本

"scripts": {
    "build": "webpack main.js"
 },
// webpack 是webpack-cli 中提供的命令, 用来实现打包的
// ./main.js 入口文件,要打包哪个文件

4.创建一个main.js文件

console.log('webpack 的入口文件被打包了');

5.运行 : npm run build
6.设置开发状态 : mode

"build" : "webpack ./main.js --mode development"
// 项目开发的两种环境
//1. 开发环境 (development) : 开发过程就是开发环境
//2. 生产环境 (production) : 线上环境, 也就是 : 项目做好了,发布上线
//生产环境下, 打包生产的js文件都是压缩后的,  开发环境下代码一般是不压缩的

配置文件方式配置

1. 项目根目录下, 创建一个 webpack.config.js文件 (文件名固定死)，若要专门指定其他文件 : --config webpack.XX.js
2. 在 webpack.config.js 中,进行配置

• webpack 是基于 node的 , 所以配置文件符合 node 方式书写配置
• 注意 : 不要在这个文件中使用ES6的的模块化 import语法,main.js里可以使用,是因为要通过webpack转化为es5的,而这个是webpack的配置文件，是用来转化别的文件的

3. 修改 package.json 中的 scripts , 脚本命令为： "build": "webpack"
4. 执行命令 : npm run build
5. 示例代码

const path = require('path')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/js/main.js'),
  // 出口
  output: {
    // 出口目录
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // 开发模式
  mode: 'development'
}

配置插件

webpack-dev-server

---

1. webpack-dev-server 使用 webpack 必备的功能(插件)

作用 : 为使用 webpack 打包提供一个服务器环境

• 1.1 自动为我们的项目创建一个服务器
• 1.2 自动打开浏览器
• 1.3 自动监视文件变化,自动刷新浏览器

2. 使用步骤

• 2.1 安装 : npm i -D webpack-dev-server
• 2.2 两种使用方式: 1-命令行 2-配置文件(推荐)

3. 方式 1 : 命令行配置

• 3.1 脚本 : "dev" : "webpack-dev-server"

• 3.2 运行到 npm run dev

• 3.3 查看路径 : "http://localhost:8080/"

4. 一些问题：

• 问题 1 : 显示的只是一些列表 => 只有进入 src 才可以显示页面

解决 : 想要查看直接进入 src 文件 : 添加 --contentBase src

• 问题 2 : 输出文件放在根目录，所以需要修改引入文件的路径

解决 : <script src="/bundle.js"></script>

• 问题 3 : 自动打开浏览器

解决 : 添加 --open

• 问题 4 : 指定端口号

解决 : 添加 --port 3001

• 问题 5 : 热更新

package.json里添加--hot

 "scripts": {
    "dev1": "webpack-dev-server --contentBase src --open --port 3001 --hot",
    "build": "webpack "
  },

5. 配置文件配置

// hot 不要写在配置文件里面,,不然的话还要配其他插件麻烦
 "dev" : "webpack-dev-server --hot",

  devServer: {
    open : true,
    contentBase : path.join(__dirname,'./src'),
    port : 3001
  }

html-webpack-plugin

---

1. html-webpack-plugin (必备的插件)

作用 :

• 能够自动引入js文件
• 能够根据指定的模板文件 (index.html),在内存中生成一个新的 index.html,并且在浏览器中打开的页面,就是该插件在内存中生成的页面
• contentBase : path.join(__dirname,'./src'), dev-server 中的这个也就无效了, 因为会自动打开index.html页面,不需要自己指定了

2. 安装 : npm i html-webpack-plugin -D
3. 配置

第一步: 引入模块

const htmlWebpackPlugin = require('html-webpack-plugin')

第二步: 配置

// 插件
plugins: [
  // 使用插件 指定模板
  new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html')
  })
]

配置加载器

webpack 只能处理 js 文件,非 js(css.less.图片.字体等)处理处理不了, 借助 loader 加载器

// loader 加载器
  module: {
    rules: [
      // 1. 处理css
      // 说明 : style-loader 和 css-loader 顺序不要换
      // 加载处理的顺序就是从后往前
      // css-loader : 处理css文件, 加载成一个模块
      // style-loader: 创建style标签,插入index.html. 
      { test: /\.css$/ , use : ['style-loader','css-loader']},
      // 2. 处理 less
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 3. 处理图片
      // base64 这是一种编码格式, 文件/图片都可以转化为base64格式,可以在浏览器中显示
      // base64 是一种字符串形式
      // 如果图片小的话,可以使用 base64 , 如果图片太大的话转化为base64 反而影响性能
      // { test : /\.(jpg|png|gif)$/, use:['url-loader'] }
      {
        test: /\.(jpg|png|gif)$/, use: [{
          loader: 'url-loader',
          options: {
            // 如果图片大小 <  limit的值100000 可以转化为base64  url-loader
            // 如果图片大小 >= limit的值 100000 不要转化为base64  引入本地文件  转化为哈希值(32)  file-loader
            limit : 50000
          }
        }]
      },
      // 处理字体图标
      { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] },
      
      // 处理es6 的语法
      { test : /\.js$/,use:['babel-loader'], exclude:/node_modules/ }
    ]
  }