Webpack 更详细的配置安装说明

文章目录

webpack 简要说明什么是 webpack为什么要使用 webpack webpack4 安装须知安装依赖包webpack-dev-server 工具安装配置文件引入 html-webpack-plugin 插件安装配置 样式处理（loader）处理第三方文件类型的过程CSSLessSassimg、字体ES6 语法（Babel）安装配置 webpack.comfig.js

webpack 简要说明

什么是 webpack

webpack是前端的一个项目构建工具，它是基于 Node.js开发出来的一个前端工具

为什么要使用 webpack

在些项目中我们经常会引用很多资源，例如 .js .css .img .svg .ejs .vue 等等类型的文件，这样会使浏览器发出很多次请求，导致网页加载速度慢，性能低等弊端

而且当我们引入很多文件之后，还需要处理它们之间的依赖关系，很麻烦，所以，使用 webpack 可以解决各个包直接按的复杂依赖关系，减少二次请求。

借助 webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能，当然也有很多类似这样的工具，例如 Gulp

后续待更新。。。

webpack4 安装须知

安装依赖包

npm i -D webpack webpack-cli webpack-dev-server

webpack-dev-server 工具

安装

npm i -D webpack-dev-server

配置

安装完毕后，由于，我们是在项目中，本地安装的 webpack-dev-server，所以无法把它当作脚本命令，在终端中直接运行（只有那些安装到全局的工具，才能在终端中正常执行）所以需要在 package.json 的scripts属性中添加代码

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" --open 自动打开浏览器--port 3000 端口设置为3000--hot 热更新(减少不必要的代码更新，启用浏览器的无刷新重载【对.js文件无效果 对.css文件有效果】)--contentBase src 以 src 目录 为根路径 直接打开当前网页(index.html)

注意：webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装 webpack 这个包

文件引入

webpack-dev-server这个工具帮我们打包生成的 bundle.js文件，并没有存放在实际的物理磁盘上，而是直接托管到了电脑的内存中，所以我们在项目的根目录中，根本找不到这个打包好的bundle.js。

我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到我们项目的根目录中，虽然看不到它，但是可以认为和 dis src平级，有一个看不见的文件，叫做 bundle.js

所以文件引入需要以 /为根地址

<script src="/bundle.js"></script>

html-webpack-plugin 插件

为什么要使用 html-webpack-plugin插件？

当使用 html-webpack-plugin之后，我们不再需要手动处理 bundle.js 的引用路径了，因为 这个插件，已经帮我们自动 创建了一个 合适的 script , 并且，引用了 正确的路径

安装

npm i -D html-webpack-plugin

配置

在 webpack-config.js中配置

const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入包 plugins: [ // 在module.exports 中追加属性 new htmlWebpackPlugin({ // 创建一个在内存中 生成 HTML 的页面插件 template: path.join(__dirname, './src/index.html'), // 指定模板页面, 会根据指定的模板页面去内存中生成 filename: 'index.html' // 指定生成的页面名称 }) ]

样式处理（loader）

处理第三方文件类型的过程

发现这个 要处理的文件不是 JS 文件，然后就去 配置文件中查找有没有对应的第三方 loader规则如果能找到对应的规则， 就会调用 对应的 loader处理 这种文件类型；在调用 loader的时候，是从后往前调用的；当最后的一个 loader调用完毕，会把 处理的结果，直接交给 webpack进行 打包合并，最终输出到 bundle.js 中去

CSS

假如我们在 main.js文件导入css文件时 import './css/index.css' 会报错

You may need an appropriate loader to handle this file type. //你需要一个合适的 loader 去处理这个文件类型

注意：webpack默认只能打包处理 JS 类型过的文件，无法处理其他的的非 JS 类型的文件

如果需要处理非 JS 类型的文件，我们需要手动安装一些合适第三方 loader加载器

如果想要打包处理 css文件，需要 npm i style-loader css-loader -D

接着在配置文件（webpack.config.js）中添加以下代码

module: { //这个节点，用于配置所有 第三方加载器 rules: [ // 所有第三方模块的匹配规则 {test: /\.css$/, use:['style-loader', 'css-loader'],} // 配置处理 .css 第三方 loader 规则 ] }

Less

如果想要打包处理 less文件，需要 npm i less-loader less -D

接着进行配置

module: { //这个节点，用于配置所有 第三方加载器 rules: [ // 所有第三方模块的匹配规则 {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 配置处理 less 文件第三方 loader 规则 ] }

Sass

如果想要打包处理 less文件，需要 npm i sass-loader node-sass -D

如果 node-sass 无法安装使用 淘宝镜像安装

接着进行配置

module: { //这个节点，用于配置所有 第三方加载器 rules: [ // 所有第三方模块的匹配规则 {test: /\.less$/, use: ['style-loader', 'css-loader', 'sass-loader']}, // 配置处理 less 文件第三方 loader 规则 ] }

img、字体

如果想要打包处理 img 字体文件，需要 npm i url-loader file-loader -D

如果 node-sass 无法安装使用 淘宝镜像安装

接着进行配置

module: { //这个节点，用于配置所有 第三方加载器 rules: [ // 所有第三方模块的匹配规则 {test: /\.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader'}, // 处理字体 {test: /\.(jpg|phg|gif|bmp|jpeg)$/, use: 'url-loader?limit=615312&name=[hash:8]-[name].[ext]'} // 处理图片路径的 loader ] }

参数

limit给定的值是图片的大小，单位是 byte ，如果引用的图片，大于或者等于给定的 limit值，则不会转换为 base64 格式的字符串，如果小于的话，则会转为 base64 的字符串name更改图片名称，[hash:8]-name=[name].[ext] 表示打包之后的图片与原本图片名字相同，每张图片前加 8 位的哈希值

ES6 语法（Babel）

总结一下新的 babel 7.x 结合 webpack 4.x 配置 的正确方法

安装

npm i @babel/core babel-loader @babel/plugin-transform-runtime @babel/preset-env @babel/plugin-proposal-class-properties -D npm i @babel/runtime -S

配置

在项目根目录新建一个 .babelrc的文件（json 格式），添加以下代码 { "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ] } webpack.config.js配置文件中追加

webpack.comfig.js

const path = require("path"); const htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: path.join(__dirname, "./src/main.js"), output: { path: path.join(__dirname, "./dist"), filename: "bundle.js" }, plugins: [ new htmlWebpackPlugin({ // 创建一个在内存中 生成 HTML 的页面插件 template: path.join(__dirname, "./src/index.html"), // 指定模板页面, 会根据指定的模板页面去内存中生成 filename: "index.html" // 指定生成的页面名称 }) ], // presets: ["@babel/env"] module: { //这个节点，用于配置所有 第三方加载器 rules: [ // 所有第三方模块的匹配规则 { test: /\.(jpg|phg|gif|bmp|jpeg)$/, use: "url-loader?limit=615312&name=[hash:8]-[name].[ext]" }, // { test: /\.(eot|ttf|svg|woff|woff2)$/, // 处理字体 use: "url-loader" }, { test: /\.css$/, // 配置处理 .css 第三方 loader 规则 use: ["style-loader", "css-loader"] }, { test: /\.less$/, // 配置处理 less 文件第三方 loader 规则 use: ["style-loader", "css-loader", "less-loader"] }, { test: /\.sass$/, // 配置处理 sass 文件第三方 loader 规则 use: ["style-loader", "css-loader", "sass-loader"] }, { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ } ] } };