webpack的基本使用_webpack configurewebpack name-CSDN博客

本文链接：https://blog.csdn.net/lff18277233091/article/details/104470243

webpack

1.0 概述

项目的打包
- 指令：
  - npm run build
- 结果：
  - 生成一个 dist 文件夹：
    - css：存放项目的所有的样式
    - fonts：存放项目所有的字体文件
    - img：项目的图片
    - js：项目的脚本
    - index.html：项目的静态文件
- 作用：
  - 将开发结构打包为单独的一个项目：
    - 这个项目：
      - 静态页面只有一个
      - 原来项目中的 .vue 文件，全部会被打包：打包为 js 文件
- 概念：
  - 开发模式：
    - 在项目进行开发阶段来使用
    - 方便程序员进行项目的开发
  - 生产模式：
    - 项目正式上线开始工作
    - 项目上线生产

1.2 - 如何去搭建一个项目的开发模式

webpack 的基本使用
webpack 配置文件
webpack 的 loader
webpack 的 plugs

2.0 webpack 基本概念

2.1 问题：

为什么要学习 webpack：
- 因为现在我们需要搭建一个开发环境
- 而开发环境是由 webpack 来搭建的
webpack 的作用：
- 官网： https://www.webpackjs.com/
- 可以用来打包：
  - 资源：
    - 样式
    - 图片
    - 脚本
    - …
- 可以将我们写的代码通过 webpack 进行打包，打包为生产环境所需要的结构
webpack 怎么用：
- 配置文件
- loader
- pulgs

2.2 准备工作：

案例：计算器
- a. 将所有的逻辑代码全部放到 main.js 中
  - 缺点：代码太多，不方便维护和阅读
- b. 将不同的逻辑代码从 main.js 中抽取（将计算方法封装为一个单独的 js 文件）
  - 问题：
    - 表现：将代码抽取之后使用 import 的方式进行导入结果报错：
    - 原因：import 是 ES6 中的语法，浏览器还不支持这种写法
    - 解决方案：
      - 可以使用 webpack 将项目进行打包

3.0 webpack 的基本使用

3.1 使用步骤：

初始化项目：
npm init
a. 安装 webpack
npm install --save-dev webpack webpack-cli
b. 配置一个 scripts(package.json 中配置)
{
“name”: “”,
“version”: “”,
“scripts”: {
“start”: “webpack ./src/main.js”
}
}
c. 打包项目
npm run start
总结：
- webpack 可以用来打包模块化的 js 文件

4.0 webpack 的配置文件

将项目中所有的配置信息统一管理到一个文件中：

4.1 使用配置文件：

步骤：
- a. 在项目的根目录下创建一个文件：webpack.config.js（文件名是写死的）
- b. 设置配置文件中的配置项
  module.exports = {
  // 项目的入口
  entry: ‘./src/main.js’
  }
- c. 在 script 中使用这个配置文件：
  // package.json
  {
  “scripts”: {
  “start”: “webpack --config webpack.config.js”
  }
  }
- d. 重新打包项目

4.2 配置项：

入口
- entry
出口
- output
  module.exports = {
  entry: “./src/index.js”,
  output: {
  filename: “bundle.js”,
  path: path.resolve(__dirname, ‘dist’)
  }
  }
项目的模式
- 分类：
  - 开发：
    - 目的：主要是方便开发人员
    - 特点：
      - 源代码应该尽可能的清晰
      - 代码会以源代码的方式进行呈现
  - 生产：
    - 目的：主要是上线工作
    - 特点：
      - 代码大小应该尽可能小
      - 代码会进行
        压缩：
        去掉空格，换行，缩进
        
        混淆：
        将变量用 a, b, c 来进行替换
- mode：
  - production：生产
  - development：开发
resolve 解析
- alias
  - 作用：用来设置别名
  - 用法
    module.exports = {
    resolve: {
    alias: {
    // 将 src 目录设置为 @ 符号
    “@”: path.resolve(__dirname, ‘src’)
    }
    }
    }
- extensions
  - 作用：可能用来省略后缀
  - 用法
    module.exports = {
    resolve: {
    // 要省略的后缀名
    extensions: [’.vue’, ‘.js’, ‘.css’]
    }
    }
源码映射：source map
- 作用：可能用来记录打包之前代码的行号
- 使用：
  module.exports = {
  // 开启源码映射
  devtool: ‘source-map’
  }

5.0 webpack 的 loader

由于 webpack 默认只能打包 js 文件，不能打包其它文件

如果强行要打包其它文件：需要使用 webpack 中的 loader

总结： loader 的作用是用来帮助 webpack 打包其它文件

5.1 打包 css：style-loader css-loader

步骤：
- a. 安装两个 loader
  npm i --save-dev style-loader css-loader
- b. 配置（在 webpack.config.js 中配置）
  module.exports = {
  module: {
  rules: [
  {
  test: /.css$/,
  use: [
  ‘style-loader’,
  ‘css-loader’
  ]
  }
  ]
  }
  }
- c. 创建 css 文件
- d. 在 main.js 中使用 import 导入
- e. 重新打包
注意点：
- loader 书写顺序不能改变
- style-loader：会将样式以 style 标签的形式放到页面的 head 标签之中
- css-loader：将 css 文件打包到 dist 目录下
- less-loader：将 less 语法转为 css 语法

5.2 打包 less ：less-loader

步骤：
- a. 下载 less-loader
  npm i --save-dev less-loader less
- b. 配置 (webpack.config.js)
  module.exports = {
  module: {
  rules: [
  {
  test: /.less$/,
  use: [
  ‘style-loader’,
  ‘css-loader’,
  ‘less-loader’
  ]
  }
  ]
  }
  }
- c. 创建一个 less 文件
- d. 在 main.js 中导入 less
- e. 重新打包

5.3 打包 sass：sass-loader

步骤：
- a. 下载 sass-loader
  npm i sass-loader node-sass --save-dev
- b. 配置（webpack.config.js）
  module.exports = {
  module: {
  rules: [
  {
  test: /.scss$/,
  use: [
  ‘style-loader’, // 将 css 添加到页面的 style 标签之中
  ‘css-loader’, // 将 css 打包到 dist
  ‘sass-loader’ // 将 sass 语法解析为 css
  ]
  }
  ]
  }
  }
- c. 创建一个 sass 文件
- d. 在 main.js　中导入
- e. 重新打包
注意点：
- 所有的 sass 文件的后缀都用 .scss 来表示

5.4 打包图片 & 字体

打包图片
- 步骤：
  - a. 下载 loader
    npm i file-loader --save-dev
  - b. 配置
    module.exports = {
    module: {
    rules: [
    {
    test: /.(gif|jpg|svg|png)$/,
    use: [
    ‘flie-loader’
    ]
    }
    ]
    }
    }
  - c. 重新打包
- 注意点：
  - 由于打包之后图片会转为相对路径
  - 所以在使用时，应该将 index.html 拷贝到 dist 目录下
打包字体
- 步骤：
  - a. 下载 loader
    npm i file-loader --save-dev
  - b. 配置
    module.exports = {
    module: {
    rules: [
    {
    test: /.(woff2|woff|eot|ttf)$/,
    use: [
    ‘flie-loader’
    ]
    }
    ]
    }
    }
  - c. 重新打包
- 注意点：
  - 字体使用的是 bootstrap@3.3.7 中的字体文件

5.5 将 es6 打包为 es5：babel-loader

步骤：
- a. 下载 babel-loader
  npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev
- b. 配置
  module: {
  rules: [
  {
  test: /.js$/,
  exclude: /node_modules/,
  use: {
  loader: ‘babel-loader’,
  options: {
  presets: [’@babel/preset-env’]
  }
  }
  }
  ]
  }
- c. 重新打包

5.6 打包 vue 文件

使用 .vue 文件
- 步骤：
  - a. 下载 vue
  - b. 在 index.html 中添加一个视图容器：
  - c. 在 src 目录下创建一个 .vue 文件： app.vue
  - d. 在 main.js 中
    - 导入 app.vue
    - 创建一个 vue 实例
    - 将 app 挂载到视图容器中
使用 vue-loader 来打包 .vue 文件
- 步骤：
  - a. 下载 vue-loader
    npm install -D vue-loader vue-template-compiler
  - b. 配置
    // 导入插件
    const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
    // 配置
    module.exports = {
    // 配置打包规则
    module: {
    rules: [
    {
    test: /.vue$/,
    loader: ‘vue-loader’
    }
    ]
    },
    // 配置插件
    plugins: [
    new VueLoaderPlugin()
    ]
    }
  - c. 重新打包

6.0 webpack 中的插件

webpack 中有三大内容：

配置:配置项目相关信息

loader：打包加载文件

plugin：提供额外的辅助功能

6.1 HtmlWebpackPlugin

作用：可以让 dist 目录自动生成一个 html 文件

步骤：
- a. 安装
  npm install --save-dev html-webpack-plugin
- b. 配置
  // 导入
  const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
```
// 配置
module.exports = {
	plugins: [
     new HtmlWebpackPlugin({
         template: path.resolve(__dirname, 'index.html')
     })
   ],
}
```
- c. 重新打包

6.2 clean-webpack-plugin

作用：每次打包时，自动清除 dist 目录

步骤：
- a. 下载插件
  npm install clean-webpack-plugin --save-dev
- b. 配置
  // 导入
  const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
```
// 配置
module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
        	title: 'Output Management'
        })
    ]
}
```
- c. 重新打包

6.3 webpack-dev-server

可以将项目以一个服务器的形式进行运行：服务器运行起来之后，一旦代码改变，浏览器会自动更新

步骤：
- a. 下载插件
  npm install --save-dev webpack-dev-server
- b. 配置插件
  module.exports = {
  devServer: {
  contentBase: ‘./dist’
  },
  }
- c. 添加启动指令（package.json）
  {
  “scripts”: {
  “start”: “webpack --config webpack.config.js”,
  “serve”: “webpack-dev-server --open”
  }
  }
- d. 运行项目
  npm run serve

6.4 模块的热替换

步骤：
- 配置
  module.exports = {
  devServer: {
  contentBase: ‘./dist’,
  hot: true, // 开启模块的热替换
  },
  }
总结：
- webpack
  - 配置：配置项目的相关信息
  - loader：打包其它文件
  - plugin：给项目添加额外功能