Webpack打包样式资源和html资源

Webpack运行指令：

开发环境：

webpack ./src/index.js -o ./build/built.js --mode=development

生产环境：

webpack ./src/index.js -o ./build/built.js --mode=production

webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

1. webpack能处理js/json资源，不能处理css/img等其他资源引用
2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~引用
3. 生产环境比开发环境多一个压缩js代码。

Webpack打包样式资源

在index.js文件下引入index.css样式文件，直接运行webpack指令会报错

import './index.css'

function add(x, y) {
  return x + y
}

console.log(add(1, 2));

通过配置Loader让 webpack 能够去处理那些非 JavaScript 文件

在根目录创建webpack.config.js配置文件

/*
  webpack.config.js  webpack的配置文件
    作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      {
        // 通过正则表达式匹配css文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

通过node指令将使用到的loader进行安装；不同文件必须配置不同loader处理

npm install style-loader css-loader less-loader -D

在控制台运行webpack指令，显示成功

Webpack打包html资源

打包html资源需要通过plugins进行配置，首先在src文件下创建index.html文件

1.安装HtmlWebpackPlugin插件npm i html-webpack-plugin -D2.在webpack.config.js文件中引入对应的插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

3.通过plugins进行配置

plugins: [
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
]

注意：在 './src/index.html' 文件中不需要在手动引入其他资源文件

运行webpack指令就会在build文件夹下生成index.html文件，打包后的js文件也会自动的引入