webpack配置_webpack 开发环境的基本配置

最新推荐文章于 2024-04-18 11:19:42 发布

weixin_39906358

最新推荐文章于 2024-04-18 11:19:42 发布

阅读量88

点赞数 1

文章标签： webpack配置

说实话一个不懂webpack 开发环境的基本配置的前端开发项目编译打包时报一些你觉得奇怪的错误时是非常痛苦的，楼主就是过来人。下面将会介绍webpack 开发环境的基本配置。

我们都知道webpack 本身是不能打包Css、Less、图片、HTML等类型的文件的，但是并不代表webpack不能借助第三方插件来弥补自身的不足。那么webpack如果想要实现很多自己本身不具备的功能时该怎么做呢？请看下面：

新建webpack.config.js文件

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

    所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        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'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

使用npm或者yarn安装相关插件包，这里我i就使用npm

npm i css-loader style-loader less-loader less -D

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

相关文件

 //index.less
#title {
  color: #fff;
}

//index.css
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: pink;
}

//入口文件index.js
// 引入样式资源
import './index.css';
import './index.less';

//html文件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <h1 id="title">hello html</h1>
</body>

</html>

运行webpack命令

官方文档地址：Configuration | webpack

打包图片

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

安装：npm install --save-dev html-loader url-loader file-loader

相关文件：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <img src="./angular.jpg" alt="angular">
</body>
</html>

index.less

#box1{
  width: 100px;
  height: 100px;
  background-image: url('./vue.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#box2{
  width: 200px;
  height: 200px;
  background-image: url('./react.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#box3{
  width: 300px;
  height: 300px;
  background-image: url('./angular.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

入口文件

index.js

import './index.less';

打包后的项目结构：

webpack命令测试

控制台输出：

通过测试我们发现webpack对于相同的图片被不同的地方引用，他也只会有一张，我们在index.html和index.less中都引入了./angular.jpg，但打包后只有一张叫830bf3c820.jpg的图片。

其他文件打包

在实际开发中我们的项目中除了以上文件我们还会使用各种格式的字体图标

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

安装npm install --save-dev file-loader

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <span class="iconfont icon-icon-test"></span>
  <span class="iconfont icon-icon-test2"></span>
  <span class="iconfont icon-icon-test3"></span>
  <span class="iconfont icon-icon-test1"></span>
</body>
</html>

devServer配置

上面我们可以看到我们每次改了文件之后都有进行手动打包，然后手动在浏览器中打开编译后的文件，这种无聊的重复劳动在编程界没什么好下场，一定会被人干掉的，所以下面将会介绍一个牛逼的插件webpack-dev-server ，要使用它首先我们的安装他。

npm i webpack-dev-server --save -D

在之前的文件中加入下面的配置：

// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }

运行npx webpack-dev-server，这种方式编译的文件式放在内存中的，因此你不会看到那个build文件

总结：

在实际开发中我们的各种文件通常都挺多的，所以的使用结构化思维对我们的文件进行分类管理，并且打包的时候我们也希望文件得到很好的管理，下面我们将会对上面我们的零散知识片段做一个总结

配置文件

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};

工程目录：

weixin_39906358

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack配置_webpack 开发环境的基本配置

说实话一个不懂webpack 开发环境的基本配置的前端开发项目编译打包时报一些你觉得奇怪的错误时是非常痛苦的，楼主就是过来人。下面将会介绍webpack 开发环境的基本配置。我们都知道webpack 本身是不能打包Css、Less、图片、HTML等类型的文件的，但是并不代表webpack不能借助第三方插件来弥补自身的不足。那么webpack如果想要实现很多自己本身不具备的功能时该怎么做呢？请看...
复制链接

扫一扫