Webpack详细开发配置教程

 1.webpack前言

我们在前面使用Vue2进行开发的时候通常都是使用我们的vue-ci四脚手架进行项目的搭建，ci脚手架中就是基于webpack进行构建打包，webpack作为代码编译工具，有入口、出口、loader和插件。webpack是一个用于现代,javaScript 应用程序的静态模块打包工具当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle，从图中我们可以看出，Webpack可以将多种静态资源js、css、less、sass 转换成一个静态文件，减少了页面的请求。

 1.1版本要求

Node.js >= 10
webpack >= 4.26

1.2webpack简介 

• 一种前端资源构建工具
• 一个静态模块打包器
• 通过webpack可以将前端所有的资源文件（js/json/css/img/less）等资源根据相互依赖关系进行静态分析，打包生成对应的静态资源bundle

1.3webpack五个核心概念 

• entry：入口
• output：输出
• loader：处理非js文件，因为webpack只能识别js，所以需要将其他的非js文件转换为js
• plugins：插件，用于进行打包优化，压缩，定义环境中的变量等
• mode：模式，用于区分开发环境和生产环境，分为development和productio

2.webpack基础

 2.1初始化项目 

// 初始化项目目录 包名不能为webpack
npm init -y
// 安装webpack、webpack-cli
npm i webpack webpack-cli -D

• 项目目录(暂时只用管index.js 其他的可以不用创建 后面有详细解答)

• index.js文件

function add(x, y) {
  return x + y
}
console.log(add(1, 2));

• 开发和生产模式下对项目进行打包

 //指定项目的模式 production:生产环境 development:开发环境
//development
npx webpack ./src/index.js -o ./dist --mode=development
//production
npx webpack ./src/index.js -o ./dist --mode=production

• 打包完成生成dist文件夹及该文件夹下的main.js文件

2.2.引入json文件

• person.json文件

{
    "name": "Tom",
    "age": 18
  }
  

• 引入index.js文件中

import person from './person.json'
function add(x, y) {
  return x + y
}
console.log(add(1, 2));
console.log(person);

• 对项目进行打包，并运行打包后的文件，发现能够正常输出，说明webpack可以识别js和json格式的文件 执行命令node .\dist\main.js

node .\dist\main.js
//输出
3
{"name": "Tom", "age": 18}

3.webpack配置文件

3是主要讲解 如何安装 配置loader 使用loader才可以进行文件编译 如css文件 在浏览器里面 不识别css文件 我们要进行loader 去编译成js文件 再根据js文件引入 style里面

• 在根目录下创建webpack.config.js

// 引入node的路径path模块
const path = require("path")
module.exports = {
  // entry入口文件地址
  entry: "./src/index.js",
  // output输出文件
  output: {
    filename: "bundle.js",
   //__dirname是当前文件夹所在的绝对路径 // C:\
   // __filename是当前文件所在的绝对路径‪ // C:\DumpStack.log
   //path.resolve是在当前文件夹路径（__dirname）下拼接一个文件路径（dist）// C:\dist
    path: path.resolve(__dirname, 'dist')
  },
  // loader相关配置
  module: {
    rules: []
  },
  // plugins插件相关配置
  plugins: [],
  // mode模式
  mode: 'development'
  // mode: 'production'
}

• 打包生成bundle.js文件

npx webpack

3.4.打包样式资源文件

• 安装相关的loader依赖

npm i css-loader style-loader -D

• 创建css文件，并引入index.js文件中

html body{
  padding: 0px;
  margin: 0px;
  background-color: aqua;
}

import person from './person.json'
import './style.css'
function add(x, y) {
  return x + y
}
console.log(add(1, 2));
console.log(person);

• 配置webpack

// 引入node的路径path模块
const path = require("path")
module.exports = {
  // entry入口文件地址
  entry: "./src/index.js",
  // output输出文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  // loader相关配置
  module: {
    rules: [
      {
        // 正则匹配文件名
        test: /\.css$/,
        // 使用的loader处理文件，执行顺序是从下到上
        use: [
          // 创建style标签，插入到head中
          'style-loader',
          // 加载css相关文件，转换成能识别的js文件
          'css-loader'
        ]
      }
    ]
  },
  // plugins插件相关配置
  plugins: [],
  // mode模式
  mode: 'development'
  // mode: 'production'
}

• 执行打包命令，发现css文件被成功的打包了

3.5.打包样式资源less文件 

 npm i less less-loader -D

• webpack相关配置

// 引入node的路径path模块
const path = require("path")
module.exports = {
  // entry入口文件地址
  entry: "./src/index.js",
  // output输出文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  // loader相关配置
  module: {
    rules: [
      {
        // 正则匹配文件名
        test: /\.css$/,
        // 使用的loader处理文件，执行顺序是从下到上
        use: [
          // 创建style标签，插入到head中
          'style-loader',
          // 加载css相关文件，转换成能识别的js文件
          'css-loader'
        ]
      },
      {
        // 正则匹配文件名
        test: /\.less$/,
        // 使用的loader处理文件，执行顺序是从下到上
        use: [
          // 创建style标签，插入到head中
          'style-loader',
          // 加载css相关文件，转换成能识别的js文件
          'css-loader',
          // 使用less-loader将less文件转换成css文件
          'less-loader'
        ]
      }
    ]
  },
  // plugins插件相关配置
  plugins: [],
  // mode模式
  mode: 'development'
  // mode: 'production'
}

• 执行打包命令，发现less文件被成功的打包了

3.6.打包HTML资源 

• 安装插件html-webpack-plugin

npm i html-webpack-plugin -D

• 此插件的目的是默认创建一个index.html文件，并引入打包后的bundle.js文件，如下是webpack相关配置

// 引入node的路径path模块
const path = require("path")
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
mo