资讯专栏INFORMATION COLUMN

从零开始的Webpack4教程

ShevaKuilin / 1896人阅读

摘要:插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。插件的使用一般是在的配置信息选项中指定。到这里基本配置已经告一段落了,所有配置我已经放在仓库中第二期优化教程已出欢迎关注和提问

1、了解Webpack相关

什么是webpack

Webpack是一个模块打包器(bundler)。

在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理

它将根据模块的依赖关系进行静态分析,生成对应的静态资源

五个核心概念

Entry:入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

Output:output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。

Loader:loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只能解析 JavaScript)。

Plugins:插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。

Mode:模式,有生产模式production和开发模式development

理解Loader

Webpack 本身只能加载JS/JSON模块,如果要加载其他类型的文件(模块),就需要使用对应的loader 进行转换/加载

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块

它本身是一个函数,接受源文件作为参数,返回转换的结果

loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader。

理解Plugins

插件可以完成一些loader不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

配置文件(默认)

webpack.config.js : 是一个node模块,返回一个 json 格式的配置信息对象

2、开启项目

初始化项目:

生成package.json文件

</>复制代码

  1. {
  2. "name": "webpack_test",
  3. "version": "1.0.0"
  4. }

安装webpack

npm install webpack webpack-cli -g //全局安装

npm install webpack webpack-cli -D //本地安装

3、编译打包应用

创建js文件

src/js/app.js

src/js/module1.js

src/js/module2.js

src/js/module3.js

创建json文件

src/json/data.json

创建主页面:

src/index.html

运行指令

开发配置指令:webpack src/js/app.js -o dist/js/app.js --mode=development

功能: webpack能够编译打包js和json文件,并且能将es6的模块化语法转换成浏览器能识别的语法

生产配置指令:webpack src/js/app.js -o dist/js/app.js --mode=production

功能: 在开发配置功能上加上一个压缩代码

结论:

webpack能够编译打包js和json文件

能将es6的模块化语法转换成浏览器能识别的语法

能压缩代码

缺点:

不能编译打包css、img等文件

不能将js的es6基本语法转化为es5以下语法

改善:使用webpack配置文件解决,自定义功能

4、使用webpack配置文件

目的:在项目根目录定义配置文件,通过自定义配置文件,还原以上功能

文件名称:webpack.config.js

文件内容:

</>复制代码

  1. const {resolve} = require("path"); //node内置核心模块,用来设置路径。
  2. module.exports = {
  3. entry: "./src/js/app.js", // 入口文件
  4. output: { // 输出配置
  5. filename: "./js/bundle.js", // 输出文件名
  6. path: resolve(__dirname, "dist") //输出文件路径配置
  7. },
  8. mode: "development" //开发环境(二选一)
  9. mode: "production" //生产环境(二选一)
  10. };

运行指令: webpack

5、js语法检查

安装loader

npm install eslint-loader eslint --save-dev

配置loader

</>复制代码

  1. module: {
  2. rules: [
  3. {
  4. test: /.js$/, //只检测js文件
  5. exclude: /node_modules/, //排除node_modules文件夹
  6. enforce: "pre", //提前加载使用
  7. use: { //使用eslint-loader解析
  8. loader: "eslint-loader"
  9. }
  10. }
  11. ]
  12. }

修改package.json(需要删除注释才能生效)

</>复制代码

  1. "eslintConfig": { //eslint配置
  2. "parserOptions": {
  3. "ecmaVersion": 8, // es8
  4. "sourceType": "module", // ECMAScript 模块
  5. }
  6. }

运行指令:webpack

6、js语法转换

安装loader

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

配置loader

</>复制代码

  1. module: {
  2. rules: [
  3. {
  4. oneOf: [ //数组中的配置只有一个能够生效, 后面的配置都会放在当前数组中
  5. {
  6. test: /.js$/,
  7. exclude: /node_modules/,
  8. use: {
  9. loader: "babel-loader",
  10. options: {
  11. presets: ["@babel/preset-env"]
  12. }
  13. }
  14. }
  15. ]
  16. }
  17. ]
  18. }

运行指令:webpack

7、打包less资源

创建less文件

src/less/test1.less

src/less/test2.less

入口app.js文件

引入less资源

安装loader

npm install css-loader style-loader less-loader less --save-dev

配置loader

</>复制代码

  1. oneOf: [
  2. {
  3. test: /.less$/,
  4. use: [{
  5. loader: "style-loader"
  6. }, {
  7. loader: "css-loader"
  8. }, {
  9. loader: "less-loader"
  10. }]
  11. }
  12. ]

运行指令:webpack

在index.html中引入打包生成的dist/js/bundle.js文件,观察效果

8、打包样式文件中的图片资源

添加2张图片:

小图, 小于8kb: src/images/1.png

大图, 大于8kb: src/images/2.jpg

在less文件中通过背景图的方式引入图片

安装loader

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

补充:url-loader是对象file-loader的上层封装,使用时需配合file-loader使用。

配置loader

</>复制代码

  1. {
  2. test: /.(png|jpg|gif|svg)$/,
  3. use: [
  4. {
  5. loader: "url-loader",
  6. options: {
  7. outputPath: "images/", //在output基础上,修改输出图片文件的位置
  8. publicPath: "../dist/images/", //修改背景图引入url的路径
  9. limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理
  10. name: "[hash:8].[ext]" // hash值为7位,ext自动补全文件扩展名
  11. }
  12. }
  13. ]
  14. }

运行指令:webpack

在index.html中引入打包生成的dist/js/bundle.js文件,观察效果

9、打包html文件

添加html文件

src/index.html

注意不要在html中引入任何css和js文件

安装插件Plugins

npm install clean-webpack-plugin --save-dev

在webpack.config.js中引入插件(插件都需要手动引入,而loader会自动加载)

const CleanWebpackPlugin = require("clean-webpack-plugin")

配置插件Plugins

</>复制代码

  1. plugins: [
  2. new HtmlWebpackPlugin({
  3. template: "./src/index.html"
  4. }),
  5. ]

运行指令:webpack

10、打包html中图片资源

添加图片

在src/index.html添加两个img标签

安装loader

npm install html-loader --save-dev

修改entry

entry: ["./src/js/app.js", "./src/index.html"]

配置loader

</>复制代码

  1. {
  2. test: /.(html)$/,
  3. use: {
  4. loader: "html-loader"
  5. }
  6. }

运行指令:webpack

11、打包其他资源

添加字体文件

src/media/iconfont.eot

src/media/iconfont.svg

src/media/iconfont.ttf

src/media/iconfont.woff

src/media/iconfont.woff2

修改样式

</>复制代码

  1. @font-face {
  2. font-family: "iconfont";
  3. src: url("../media/iconfont.eot");
  4. src: url("../media/iconfont.eot?#iefix") format("embedded-opentype"),
  5. url("../media/iconfont.woff2") format("woff2"),
  6. url("../media/iconfont.woff") format("woff"),
  7. url("../media/iconfont.ttf") format("truetype"),
  8. url("../media/iconfont.svg#iconfont") format("svg");
  9. }
  10. .iconfont {
  11. font-family: "iconfont" !important;
  12. font-size: 16px;
  13. font-style: normal;
  14. -webkit-font-smoothing: antialiased;
  15. -moz-osx-font-smoothing: grayscale;
  16. }

修改html,添加字体

配置loader

</>复制代码

  1. {
  2. loader: "file-loader",
  3. exclude: [/.js$/, /.html$/, /.json$/],
  4. options: {
  5. outputPath: "media/",
  6. publicPath: "../dist/media/",
  7. name: "[hash:8].[ext]",
  8. },
  9. }

运行指令:webpack

12、自动编译打包运行

安装loader

npm install webpack-dev-server --save-dev

引入webpack

const webpack = require("webpack");

修改webpack配置对象(注意不是loader中)

</>复制代码

  1. devtool: "inline-source-map", // 将编译后的代码映射回原始源代码,更容易地追踪错误和警告
  2. devServer: {
  3. contentBase: "./dist", //项目根路径
  4. hot: true, //开启热模替换功能
  5. open: true //自动打开浏览器
  6. },
  7. plugins: [
  8. new webpack.NamedModulesPlugin(),
  9. new webpack.HotModuleReplacementPlugin()
  10. ]

修改loader部分配置

因为构建工具以dist为根目录,不用再找dist了

publicPath: "../dist/images/" --> publicPath: "images/"

publicPath: "../dist/media/" --> publicPath: "media/"

修改package.json中scripts指令

"start": "webpack-dev-server",

"dev": "webpack-dev-server"

运行指令:npm start / npm run dev

</>复制代码

  1. 以上就是webpack开发环境的配置,可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。
13、准备生产环境

创建文件夹config,将webpack.config.js复制两份

webpack.dev.js

webpack.prod.js

修改webpack.prod.js配置,删除webpack-dev-server配置

</>复制代码

  1. module.exports = {
  2. output: {
  3. filename: "js/[name].[hash:8].js", //添加了hash值, 实现静态资源的长期缓存
  4. publicPath: "/" //所有输出资源公共路径
  5. },
  6. module: { //loader其他没有变化,只放了变化部分,只有需要修改路径部分改了
  7. rules: [
  8. {
  9. oneOf: [
  10. {
  11. test: /.(png|jpg|gif|svg)$/,
  12. use: [
  13. {
  14. loader: "url-loader",
  15. options: {
  16. limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理
  17. name: "images/[name].[hash:8].[ext]"
  18. }
  19. }
  20. ]
  21. },
  22. {
  23. loader: "file-loader",
  24. exclude: [/.js$/, /.html$/, /.json$/],
  25. options: {
  26. name: "media/[name].[hash:8].[ext]",
  27. },
  28. }
  29. ]
  30. }
  31. ]
  32. },
  33. mode: "production", //修改为生产环境
  34. }

修改package.json的指令

"start": "webpack-dev-server --config ./config/webpack.dev.js"

"dev": "webpack-dev-server --config ./config/webpack.dev.js"

"build": "webpack --config ./config/webpack.prod.js"

开发环境指令

npm start

npm run dev

生产环境指令

npm run build

注意: 生产环境代码需要部署到服务器上才能运行

npm i serve -g

serve -s dist

14、清除打包文件目录

安装插件

npm install clean-webpack-plugin --save-dev

引入插件

const CleanWebpackPlugin = require("clean-webpack-plugin");

配置插件

</>复制代码

  1. new CleanWebpackPlugin()

运行指令:npm run build

15、提取css成多带带文件

安装插件

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

引入插件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

配置loader

</>复制代码

  1. {
  2. test: /.less$/,
  3. use: [
  4. MiniCssExtractPlugin.loader,
  5. "css-loader",
  6. "less-loader",
  7. ]
  8. }

配置插件

</>复制代码

  1. new MiniCssExtractPlugin({
  2. filename: "css/[name].[hash:8].css",
  3. chunkFilename: "css/[id].[hash:8].css"
  4. })

运行指令

npm run build

serve -s dist

16、添加css兼容

安装loader

npm install postcss-loader autoprefixer --save-dev

配置loader

</>复制代码

  1. {
  2. test: /.less$/,
  3. use: [
  4. MiniCssExtractPlugin.loader,
  5. "css-loader",
  6. "postcss-loader",
  7. "less-loader",
  8. ]
  9. }

在项目根目录添加postcss配置文件:postcss.config.js

</>复制代码

  1. module.exports = {
  2. "plugins": {
  3. "autoprefixer": {
  4. "browsers": [
  5. "ie >= 8",
  6. "ff >= 30",
  7. "chrome >= 34",
  8. "safari >= 8",
  9. "opera >= 23"
  10. ]
  11. }
  12. }
  13. }

运行指令:

npm run build

serve -s dist

17、压缩css

安装插件

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

引入插件

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

配置插件

</>复制代码

  1. new OptimizeCssAssetsPlugin({
  2. cssProcessorPluginOptions: {
  3. preset: ["default", { discardComments: { removeAll: true } }],
  4. },
  5. })

运行指令:

npm run build

serve -s dist

18、图片压缩

安装loader

npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin --save-dev

配置loader

</>复制代码

  1. {
  2. test: /.(png|jpg|gif|svg)$/,
  3. use: [
  4. {
  5. loader: "url-loader",
  6. options: {
  7. limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理
  8. name: "images/[name].[hash:8].[ext]"
  9. }
  10. },
  11. {
  12. loader: "img-loader",
  13. options: {
  14. plugins: [
  15. require("imagemin-gifsicle")({
  16. interlaced: false
  17. }),
  18. require("imagemin-mozjpeg")({
  19. progressive: true,
  20. arithmetic: false
  21. }),
  22. require("imagemin-pngquant")({
  23. floyd: 0.5,
  24. speed: 2
  25. }),
  26. require("imagemin-svgo")({
  27. plugins: [
  28. { removeTitle: true },
  29. { convertPathData: false }
  30. ]
  31. })
  32. ]
  33. }
  34. }
  35. ]
  36. }

运行指令:

npm run build

serve -s dist

19、压缩html

修改插件配置

</>复制代码

  1. new HtmlWebpackPlugin({
  2. template: "./src/index.html",
  3. minify: {
  4. removeComments: true,
  5. collapseWhitespace: true,
  6. removeRedundantAttributes: true,
  7. useShortDoctype: true,
  8. removeEmptyAttributes: true,
  9. removeStyleLinkTypeAttributes: true,
  10. keepClosingSlash: true,
  11. minifyJS: true,
  12. minifyCSS: true,
  13. minifyURLs: true,
  14. }
  15. })

运行指令:

npm run build

serve -s dist

</>复制代码

  1. 以上就是webpack生产环境的配置,可以生成打包后的文件。

    到这里基本配置已经告一段落了,所有配置我已经放在 仓库 中

  2. 第二期 Webpack4优化教程 已出~ 欢迎关注和提问~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102624.html

相关文章

  • 学习从零开始搭建React脚手架

    摘要:写在前面准备学习一下和相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建全家桶框架教程步骤上都差不多第一步,依赖总览完成到我现在半成品的过程中,目前完成开发模式的相关操作,添加了按需加载的地步。 写在前面 准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;...

    cod7ce 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • 为什么我不推荐你使用vue-cli创建脚手架?

    摘要:后来经过排查你会发现是由于目前还没有版本。可以使用该方式解决。这就是我为什么不推荐你使用创建脚手架的原因此文的受众是想要进阶中级的初级前端人员。 最近在知乎看到一个问题,原问题如下: 很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜。难道现在一般的做...

    trigkit4 评论0 收藏0

发表评论

0条评论

ShevaKuilin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<