关于前端:Webpack打包样式资源和html资源

43次阅读

共计 1747 个字符，预计需要花费 5 分钟才能阅读完成。

开发环境：

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

webpack 能解决 js/json 资源，不能解决 css/img 等其余资源
援用

生产环境和开发环境将 ES6 模块化编译成浏览器能辨认的模块化~
援用

生产环境比开发环境多一个压缩 js 代码。

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

import './index.css'

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

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

在根目录创立 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 指令，显示胜利

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

1. 装置 HtmlWebpackPlugin 插件
npm i html-webpack-plugin -D
2. 在 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'
    })
]