欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

手动配置webpack(一)

程序员文章站 2022-06-28 12:56:21
开发环境的基本配置1、初始化配置初始化 package.json文件npm init -y下载安装 webpack 和 webpack-cil:npm i webpack@4.32.2 webpack-cli@3.3.2 --sava-dev2、创建配置文件创建 webpack.config.js文件为这个文件进行简单的配置const { resolve } = require('path');module.exports = { extry: './src...

开发环境的基本配置

1、初始化配置

  • 初始化 package.json文件

    npm init -y

  • 下载安装 webpack 和 webpack-cil:

    npm i webpack@4.32.2 webpack-cli@3.3.2 --sava-dev

2、创建配置文件

  • 创建 webpack.config.js文件
  • 为这个文件进行简单的配置
const { resolve } = require('path');

module.exports = {
  extry: './src/index.js',  // 入口文件
  oupput: {
    filename: './js/index.js',  // 输出文件名
    path: resolve(__dirname, 'build')  //  输出文件路径
  },
  module: {
  	// 进行想起的 loader 配置,不同的文件必须配置不同的 loader 进行处理    
  },
  plugins: [
	// 进行插件的配置
  ],
  mode: 'development' // 开发环境和生产环境的选择
}

3、打包 html 资源

  • 安装对应的插件

    npm install --save-dev html-webpack-plugin

  • 修改相应的配置文件

    // 导入所需的插件
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    // 进行简单的配置
    module.exports = {
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        })
      ]
    }
    

    html-webpack-plugin,默认会创建一个空的 HTML,自动引入打包输出的所有资源(JS/CSS),另外进行简单的配置,指定导入的 html 模板

4、打包样式资源

打包 css 文件

  • 安装相应的 loader

    npm i css-loader style-loader -D

  • 修改配置文件

    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          }
        ]
      }
    }
    

use 数组中 loader 的执行顺序是,从右到左,依次执行

style-loader 的作用是:创建 style 标签,将 js 中的样式资源插入到 style 标签中,并将 style 标签插入到 head 中

打包 less 文件

  • 安装相应的 loader

    npm i less-loader less -D

  • 修改配置文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}

以上打包两种样式资源的配置文件可以进行合并

module.exports = {
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}

5、打包图片资源

默认情况下,webpack 会将图片的路径原封不动的打包,但是此时的路径是相对于 src 而言的,打包后的程序是在 build 文件夹下的,所以需要进行处理

打包图片资源处理主要处理的就是打包后背景图片或 img 标签中的图片路径不对的问题

  • 安装对应的 loader

    npm install --save-dev html-loader url-loader file-loader

  • 修改相应的配置

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|svg|jpg|jpeg|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              // esModel: false
              name: '[name][hash:10].[ext]',
              outputPath: 'img'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
        ]
      }
    }
    

    打包后的图片是一个32为的 hash 值,可以对图片进行简答的处理

    • name:给图片进行重新命名
    • limit:对图片进行处理,如 limit: 8 * 1024所代表的含义是加载图片时,若小于 limit 时,会将图片变异成 base64 字符串形式,大于 limit 时,会使用 file-loader模块进行加载
    • [name]:获取图片原来的名字,放到该位置
    • [hash:10]:保留 hash 值的前10位
    • [ext]:使用图片原来的拓展名

6、打包其它资源(如字体资源等)

  • 由于上一步已经下载安装了 file-loader,所以不需要再安装了

  • 修改配置文件

    module.exports = {
      module: {
        rules: [
          {
            exclude: /\.(html|css|less|js|png|jpg|svg|gif|png|jpg)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10][ext]',
              outputPath: 'static'
            }
          }
        ]
      }
    }
    

7、搭建本地服务器 devServer

基于 node.js 搭建,内部使用了 express 框架,它的主要作用是:用来自动化(自动编译、自动打开浏览器、自动刷新浏览器)。另外它是只在内存中进行编译打包,而不会有任何的输出

npx webpack-dev-server

  • contentBase:为安一个文件夹提供本地服务,默认是根文件夹,这里填写./dist
  • port:端口
  • compress:启用 gzip 压缩
  • open:默认打开
module.exports = {  
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    open: true,
    port: 4000
  }
}

在这一步可能会出现这样的问题:Error: Cannot find module 'webpack/bin/config-yargs,这是由于 webpack、 webpack-cli 和 webpack-dev-server 版本造成的问题

如何解决,将你的 webpack、webpack-cli 和 webpack-devserver 的版本改为如下版本(先卸载之前的版本,再安装下面的版本)
手动配置webpack(一)

完整代码链接

本文地址:https://blog.csdn.net/qq_44162474/article/details/109266267