3. webpack 开发环境的基本配置

已于 2022-03-12 19:07:44 修改
阅读量677 收藏
点赞数
分类专栏： webpack 从入门到精通 文章标签： javascript 前端 node.js
于 2022-03-06 19:46:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pp_46918/article/details/123315823
版权

第 3 章：webpack 开发环境的基本配置

3.1 创建配置文件
1. webpack.config.js
	const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。
	module.exports = { 
		entry: './src/js/index.js', // 入口文件 
		output: { // 输出配置 
		filename: './built.js', // 输出文件名 
		path: resolve(__dirname, 'build/js') // 输出文件路径配置 },
		mode: 'development' //开发环境 
	};

1. 创建文件 webpack.config.js
2. 配置
3. 运行指令: webpack 
4. 结论: 此时功能与上节一致
3.2 打包样式资源
  1. 创建项目代码于src目录下：
    index.js
// 引入样式资源
import './index.css';
import './index.less';

index.css

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

index.less

#title {
  color: white;
}

  1. 下载安装 loader 包

     // 如果是初始状态，需执行第1、2指令
 npm init    // 生成package.json
 npm install webpack webpack-cli -D // 下载并安安装webpack  webpack-cli ；生成node_moundle文件夹和package-lock.json
 // 建议在外层目录下载包，避免重复下载包
 npm i css-loader style-loader less-loader less -D

  2. webpack的配置文件，webpack.config.js

     作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。(项目代码是ES6)
 详解loader配置

const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径; 输出到当前文件目录下的build目录
    path: resolve(__dirname, 'build')  
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件（如less、css）必须配置不同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的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

  1. 执行webpack指令运行，在build目录下生成build.js

     项目目录> webpack

  2. 引入打包后的文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack3</title>
</head>
<body>
<h1 id="title">打包样式资源</h1>
<script src="./built.js"></script>
</body>
</html>

	“创建style标签，将js中的样式资源插入进行，添加到head中生效”

在这里插入图片描述

3.3 打包 HTML 资源
  1. 创建文件：
    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>
  <h1 id="title">hello html</h1>
</body>

</html>

index.js

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

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

  1. 下载安装 plugin 包

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

  2. 修改配置文件webpack.config.js

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
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: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins的配置
    // html-webpack-plugin   【注意】
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // new HtmlWebpackPlugin()   // 生成的html文件没有<body>,比如 <h1 id="title">hello html</h1>
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode: 'development'
};
  1. webpack执行打包
    在build目录下生成index.html,并自动引入打包输出的所有资源（JS/CSS）

build\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>
<script defer src="built.js"></script></head>

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

</html>
3.4 打包图片资源
  1. 创建文件：
    在这里插入图片描述

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.js

import './index.less';

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%;
}

  1. 下载安装 plugin 包

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

  2. 修改配置文件webpack.config.js

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'
};
  1. webpack执行打包
    在build目录下生成index.html,并自动引入打包输出的所有资源（JS/CSS）

build\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>
<script defer src="built.js"></script></head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <img src="4be04d639ff5a6a8cb8b.jpg" alt="angular">
</body>
</html>
3.5 打包其他资源

  1. 创建文件
    其他资源： 不需要处理的资源，如字体图标在这里插入图片描述

  2. 修改配置文件webpack.config.js

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'
};
3.6 devserver
开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
特点：只会在内存中编译打包，不会有任何输出
启动devServer指令为：npx webpack-dev-server
  1. 下载
    npm i webpack-dev-server -D
  2. 修改配置文件webpack.config.js
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',

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

  1. 运行指令: npx webpack-dev-server

     运行成功提示：Compiled successfully.
 本地调试地址：浏览器地址：localhost:3000
 因为-D是本地安装，所以用npx；之前的webpack -g是全局安装
 以前webpack4的时候配置devServer中用的是contentBase:“www”;
 webpack5需要替换成 static:“www”
3.7 开发环境配置
	总结以上内容

  1. 创建文件
    在这里插入图片描述

  2. index.html、index.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>开发环境配置</title>
</head>

<body>
  <h1>开发环境配置</h1>
  <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>
  <div id="box"></div>
  <img src="./imgs/vue.jpg" alt="vue">
  <img src="./imgs/react.png" alt="react">
</body>

</html>

// 引入
import '../css/iconfont.css';
import '../css/index.less';

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

console.log(add(1, 2));
  1. 配置webpack.config.js
/*
  开发环境配置：能让代码运行
    运行项目指令：
      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: {
    static: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};
  1. 执行webpack

潇潇的雨幕里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack的环境配置
苗雪松的博客
10-10 530
     许多小伙伴在学到vue时，当做单页面应同时，不可避免的会用到webpack，可是那都是命令自动帮我们做好的，如果想在自己的项目中运用的话，又该怎么做呢？      我在看了一些视频和文档后，决定自己写一篇博客来记录一下我的学习过程，方便广大博友一起学习进步。  步骤： 1打开我们的命令行工具，先进入E盘，然后mkdir命令新建一个文件夹demo，在建立一个webpack_demo。...
前端必备技能 webpack - 3. webpack基本配置
qq_39506551的博客
10-24 261
前端必备技能 webpack - 3. webpack基本配置 前端必备技能 webpack - 3. webpack基本配置 一、入口 entry 二、出口 output 三、预处理 loader 3.1 条件（匹配资源） module.rules.resource 3.2 结果 module.use 四、插件 Plugin 五、模式 mode 我们来前面的博客：1. webpack简介 中已经介绍了 webpack 的几个核心概念，这同时也是 webpack 的基本配置项。
webpack开发环境的基本配置（二）
weixin_40359716的博客
03-12 237
1. 创建配置文件 创建文件 webpack.config.js 配置内容如下 const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。 module.exports = { entry: './src/js/index.js', // 入口文件 output: { // 输出配置 filename: './built.js', // 输出文件名 path: resolve(__dirname, 'build/js')
Webpack详细开发教程
最新发布
weixin_44867704的博客
07-22 783
webpack详细开发教程
webpack 开发环境的基本配置
wzg0817的博客
07-17 352
文章目录1. webpack 初体验1.1 初始化配置1.2 编译打包应用2. webpack 开发环境的基本配置2.1 创建配置文件2.2 打包样式资源2.3 打包 HTML资源2.4 打包图片资源2.5 打包其他资源2.6 devserver2.7 开发环境的配置 1. webpack 初体验 1.1 初始化配置 初始化 package.json 输入指令: npm init 下载并安装 webpack 输入指令: npm install webpack webpack-cli -g
webpack开发环境配置
前端、python爱好者
12-22 1479
webpack开发基本配置
webpack之开发环境配置
weixin_50238437的博客
09-13 1817
webpack之开发环境配置
webpack4.x开发环境配置详解
10-18
下面我们就详细探讨一下webpack 4.x在开发环境中的配置方法，以及在配置过程中可能遇到的问题和解决方案。 首先，安装webpack是配置过程的第一步。在npm或yarn中不指定版本号时，会默认安装最新版本的webpack。在...
webpack 2.x配置reactjs基本开发环境详解
11-30
Webpack 2.x 配置ReactJS基本开发环境详解旨在帮助开发者搭建一个适合初学者的React应用开发环境。本文主要关注的版本是Webpack 2.2 和 React 15.4.2。随着Webpack从1.x升级到2.x，一些重要的接口如`module.loaders`...
hand-vue3-project:Vue 3.x + Webpack 5.x 手动搭建开发环境
05-26
3. **创建Webpack配置**：创建一个`webpack.config.js`文件，定义Webpack的基本配置，包括入口点、输出路径、模块规则（loader）和插件（plugin）。对于Vue 3.x，你需要配置Vue Loader来处理.vue文件。 4. **设置...
Webpack开发环境配置
qq_36801250的博客
04-21 450
webpack入门教程二 开发环境配置 接入门教程一 处理CSS的兼容性 通过postcss-loader来处理css的兼容性 我们可以通过post-css来处理我们的css兼容性，通过autoprefixer这个插件来让webpack自动为我们的css添加前缀 安装postcss-loader与autoprefixer $ cnpm install postcss-loader auto...
webpack 配置 - 开发环境
zhenzhenzhen1705的博客
05-08 126
webpack打包工具 概念 .vue .sass 等很多文件浏览器识别不了，需要编译打包成js文件的工具 使用 打包时会从入手文件开始，找相互依赖的文件 全局安装 npm install webpack webpack-cli -g 当前目录下安装 npm install webpack webpack-cli --save-dev 基础打包 需要入口文件，-o 指定输出文件，开发模式 开发：webpack ./src/index.js -o ./dist/bundle.js --mode
webpack开发环境基本配置
MoonNight608的博客
12-22 153
开发环境配置文件 webpack.config.js 开发环境配置文件webpack.config.js 1、下载css-loader、style-loader、less-loader、less npm i css-loader style-loader less-loader less -D 2、打包html资源，下载html-webpack-plugin npm install --save-dev html-webpack-plugin 3、打包图片资源、下载图片html-loader、url-l
Webpack 开发环境的基本配置
cinoway的博客
02-26 198
Webpack 开发环境的基本配置 webpack.config.js 是 webpack 的配置文件。 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置） 所有构建工具都是基于 nodejs 平台运行的，模块化默认采用 commonjs。 开发环境配置主要是为了能让代码运行。主要考虑以下几个方面： 打包样式资源 打包 html 资源 打包图片资源 打包其他资源 devServer 下面是一个简单的开发环境webpack.confg.js配置文件
webpack 开发环境的基本配置
前端之行，任重道远！
03-26 337
一，创建配置文件 创建文件 webpack.config.js 配置内容如下 const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。 module.exports = { entry: './src/js/index.js', // 入口文件 output: { // 输出配置 filename: './built.js', // 输出文件名 path: resolve(__dirname, 'build/js') // 输出文件路径
webpack4.x开发环境配置
Jq的博客
08-15 631
一、全局安装webpack //全局安装 npm install webpack -g //安装到你的项目目录 npm install --save-dev webpack 二、安装webpack-cli 如果你使用 webpack v4+ 版本，你还需要安装 webpack-cli或者webpack-command，否则webpack命令运行不了。 //卸载本地安装的webpac...
使用webpack5从0搭建。 webpack配置分为三个文件webpack.dev.js webpack.common.js webpack.pro.js webpack.dev.js 开发环境配置 webpack.common.js 是公共配置文件 webpack.pro.js 生产环境配置 package.json 配置三个命令 serve 启动 对应配置webpack.dev.js build打包 对应配置webpack.pro.js 要求配置babel，eslint，dev-server, css-loader,scss-loader,post-loader,style-loader,css压缩，JS压缩，file-loader url-loader,clean-webpack-plugin, js多进程打包，
06-06
好的，您的问题是如何使用webpack5从0搭建项目并配置开发环境和生产环境？ 首先，需要安装webpack和webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 然后，我们需要创建三个配置文件：webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值