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-loadercss-loader 是存在先后顺序的,必须先写 style-loader 在写 css-loader

Webpack中使用Loader_处理Less文件

安装

温馨提示

需要安装less和less-loader两个包

npm instal --save-dev less@4.1.3 less-loader@11.0.0

修改配置

修改 webpack.config.js 配置文件

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

增加 less 文件引入到项目中

import "../src/css/style.less"

Webpack中使用Loader_处理Sass文件

我想 webpack 能打包scss\sass文件类型

安装

温馨提示

需要安装sass和sass-loader两个包

npm instal --save-dev sass@1.52.3 sass-loader@13.0.0

修改配置

修改 webpack.config.js 配置文件

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

增加 scss 文件引入到项目中

import "../src/css/style.scss"

Webpack中使用插件_HTML插件

html-webpack-plugin 可以帮助我们将 src index.html 复制一份到项目的根目录中

安装

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

配置插件

const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new HtmlPlugin({
      template: './src/index.html', //指定源文件的存放路径
      filename: './index.html'  // 指定生成的文件的存放路径
   })
 ]
};

温馨提示

会自动帮打包好的bundle.js 自动放进index.html 的底部

Webpack分离CSS文件

当前的打包,是将JavaScript和CSS同时打包进入了一个文件中,如果CSS很小其实是有优势的,但是如果CSS很大,那么这个文件就应

该单独抽离出来我们可以使用 mini-css-extract-plugin 进行分离CSS

安装

npm install --save-dev mini-css-extract-plugin@2.6.1

修改配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
     {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
     },
     {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader']
     },
     {
        test: /\.(scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
     }
   ]
 },
 plugins: [
    new MiniCssExtractPlugin({
      filename:"./css/index.css"
   })
 ]
};

温馨提示

mini-css-extract-plugin style-loader 冲突,需要删除 style-loader

Webpack压缩CSS文件

通过 mini-css-extract-plugin 分离出来的CSS文件并没有经历压缩,所以我们需要单独进行压缩,如何操作呢?

安装

通过 optimize-css-assets-webpack-plugin 进行压缩CSS文件

npm install --save-dev optimize-css-assets-webpack-plugin@6.0.1

修改配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
     {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader"]
     },
     {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader",'less-loader']
     },
     {
        test: /\.(scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader", 'sass-loader']
     }
   ]
 },
  plugins: [
    new MiniCssExtractPlugin({
      filename:"./css/index.css"
   }),
    new OptimizeCSSAssetsPlugin()
 ]
};

Webpack中配置Babel

走到此时很多小伙伴可能会发现问题,我们现在写的ES6代码,为啥能正常运行呢?

那是因为我们目前用的是 Chrome 浏览器,默认就支持,但是如果一些浏览器无法支持怎么办?

我需要使用 babel 进行编译

安装

npm install --save-dev @babel/core@7.18.5
npm install --save-dev @babel/preset-env@7.18.2
npm install --save-dev babel-loader@8.2.5

增加配置文件"babel.config.js"

在项目根目录下增加 babel.config.js 的配置文件

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
}

修改配置文件

module: {
    rules: [
     {
        test:/\.js$/,
        use:['babel-loader']
     },
   ]
}

温馨提示

通过观察打包之后的文件,在添加babel之前和之后的区别

目录
相关文章
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
48 0
|
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中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
缓存 前端开发 JavaScript
好程序员教程分享webpack打包文件太大怎么办
好程序员教程分享webpack 打包文件太大怎么办,webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如HotModuleReplacementPlugin, NoErrorsPlugin复制代码这时候不管用什么优化方式,都没多大效果。
2014 0
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
26 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
19 0
|
4月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
106 0
|
4月前
|
JavaScript 数据库
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
66 0
|
7月前
|
JavaScript
Webpack4 创建项目以及打包一个JS文件
Webpack4 创建项目以及打包一个JS文件
68 0