Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)

简介: Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)

Webpack简介



我们思考一个问题:当前端项目越来越大的时候,我们还能按照以往的思维方式继续开发么


问题症结所在:文件管理、ES6代码的转换、项目的打包...


解决方案:前端工程化(Webpack)


前端工程化

在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化


例如:


砌一堵墙:怎么简单怎么来,只要材料准备齐全,一个人直接干就行


一栋楼:需要很多大型机器,也需要更多的人,重要的必须要规范化干活,避免发生危险


本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容


搭建Webpack环境



安装全局 webpack

npm install --save webpack@5.73.0
npm install --save webpack-cli@4.10.0


温馨提示

由于 webpack 版本更新迭代较快,为了避免版本带来的错误,在接下来的包安装中,都需要指定具体版本信息,如上述版本添加方式,请各位同学保持与老师一致的版本


创建本地项目文件夹

mkdir webpack_demo
cd webpack_demo


初始化项目

npm init


安装 webpack 到本地

npm install --save-dev webpack@5.73.0
npm install --save-dev webpack-cli@4.10.0


使用 webpack


创建项目结构 src 、 public

// src/show.js
export function show(content) {
 window.document.getElementById('root').innerText = 'Hello,' + content;
}
// src/index.js
import { show } from './show.js'
show('iwen');


执行 webpack


温馨提示
webpack会自动寻找src目录,然后寻找index.js入口文件,然后进行打包,最终生成一个dist目录为打包后内容。


public 下创建 index.html ,引入自动生成的 main.js 文件

<!-- index.html -->
<div id="root"></div>
<script src="../dist/main.js"></script>


Webpack增加配置文件



webpack 可以增加配置文件,有了配置文件之后,可以更多的操作他


入口配置


在项目的根目录下创建 webpack.config.js 文件并输入以下代码

module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
};


出口配置


webpack.config.js 文件增加出口配置代码

const path = require('path');
module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
 output: {
  // 把所有依赖的模块合并输出到一个 bundle.js 文件
  filename: 'bundle.js',
  // 输出文件都放到 dist 目录下
  path: path.resolve(__dirname, './dist'),
}
};


然后我们在执行 webpack命令,此时就会默认执行 webpack.config.js 他会按照配置文件进行运行


Webpack中使用Loader



Webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 能让 webpack 能够去处理其他类型的文件(比如css类型文件,图片类型等),并将它们转换为有效模块,以供使用


Webpack 把一切文件看作模块,CSS 文件也不例外,所以想打包CSS需要安装 css-loader


安装 css-loader

npm install --save-dev css-loader@6.7.1


修改配置


修改 webpack.config.js 配置文件

const path = require('path');
module.exports = {
 module:{
  rules:[
   {
      test: /\.css$/,
      use: ['css-loader']
   }
 ]
}
};


增加CSS文件


index.js 文件中引入CSS文件

import "../src/css/index.css"


此时运行会发现,css样式让然是无法加载的,因为 css-loader 只是能识别css文件


要显示css样式还需要引入 style-loader 才可以


安装 style-loader

npm install --save-dev style-loader@3.3.1


修改配置


修改 webpack.config.js 配置文件

const path = require('path');
module.exports = {
 module:{
  rules:[
   {
      test: /\.css$/,
      use: ["style-loader",'css-loader']
   }
 ]
}
};


温馨提示

style-loader 和 css-loader 是存在先后顺序的,必须先写 style-loader 在写 css-loader


Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下):https://developer.aliyun.com/article/1420352

目录
相关文章
|
3天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
15 0
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
47 0
|
2月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
48 0
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
59 1
|
2月前
|
前端开发 JavaScript API
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
3月前
|
前端开发 搜索推荐 开发者
CSS 选择器全攻略:从入门到精通(下)
CSS 选择器全攻略:从入门到精通(下)
|
3月前
|
缓存 前端开发 JavaScript
CSS 选择器全攻略:从入门到精通(上)
CSS 选择器全攻略:从入门到精通(上)
CSS 选择器全攻略:从入门到精通(上)
|
3月前
|
前端开发 程序员 容器
CSS样式文件和class类名命名规范参考
CSS样式文件和class类名命名规范参考
26 0