webpack 入门教程(一)

webpack 简介

上图是在webpack官网展现的图片,从图中可以看出,我们常用的js、css、less、静态资源文件等都可以通过webpack转换为一个静态文件,将代码压缩打包

什么是webpack

webpack是一个前端构建工具,前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开发环境的代码是为了更好的阅读,而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如,开发环境的代码,要通过混淆压缩后才能放在线上运行,这样代码体积更小,而且对代码执行也不会有任何影响。

webpack也是⼀个模块打包⼯具,可以识别出引⼊模块的语法 ,早期的webpack只是个js模块的打包⼯具,现在可以是css,png,vue的模块打包⼯具

创建项目

  • 初始化项目命令

npn init -y    //-y表示接受npm默认值,自动按下回车的效果

在node开发中使用npm init初始化后会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中

安装webpack

如果想要安装webpack,则需要node.js环境的支持,可以选择node官方网站安装

安装完成后可以通过  node -v 查看是否安装成功

  • 局部安装:(全局 -g)

npm i webpack webpack-cli -D
  • 安装指定版本:

npm install webpack@x.xx webpack-cli -D
  • 检查当前项目下webpack安装是否成功:

npx webpack -v// npx帮助我们在当前项⽬中的node_modules⾥查找webpack
  • 查看webpack的历史发布信息

npm info webpack

测试:启动webpack打包

我们可以在文件目录下新建一个src文件夹,并且创建一个 index.js文件作为入口文件测试webpack打包

然后通过webpack打包命令打包:

1 npx webpack //打包命令 使⽤webpack处理index.js这个⽂件

webpack 配置⽂件

零配置是很弱的,特定的需求,总是需要⾃⼰进⾏配置,需要自己通过默认配置文件 webpack.congfig.js去配置
loader有顺序,从右到左,从下到上,应保证 loader 的先后顺序:'style-loader' 在前,而 'css-loader' 在后。如果不遵守此约定,webpack 可能会抛出错误
 1 const path = require("path"); //路径解析
 2 const HtmlWebpackPlugin = require("html-webpack-plugin");
 3 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 4 
 5 module.exports = {
 6     //多入口文件,单入口文件可以用字符串
 7     entry: {
 8         index:'./src/index.js', //打包入口文件
 9         login:'./src/login.js'
10     },
11     output: {
12         path: path.resolve(__dirname, './dist'), //默认输出地址
13         filename:"[name]_[chunkhash:8].js" //多入口文件可以使用占位符打包
14     },
15     mode: "development", //设置开发环境,生产模式:production   开发模式:development
16     devtool:"inline-source-map", //源代码与打包后的代码的映射关系,可以了解一下sourceMap
17     devServer: {
18         port: 8080,
19         contentBase: './dist',
20         open: true,
21         proxy: {
22             "/api": {
23                 target: "http://localhost:9092"
24             }
25         }
26     },
27     module: {
28         rules: [
29             //loader模块处理
30             {
31                 test: /\.(png|jpg|gif)$/,  //正则匹配后缀
32                 use: {
33                     loader: "url-loader",
34                     //额外的配置,比如资源名称
35                     options: {
36                         name: "[name].[ext]", //打包后的名称
37                         outputPath: "images/", //打包指定路径
38                         limit: 2048 //小于2048b,转换成base24
39                     }
40                 }
41             },
42             {
43                 test: /\.(woff2|woff)$/, //匹配字体规则
44                 use:{
45                     loader: "file-loader"
46                 }
47             },
48             {
49                 test: /\.(less|css)$/,
50                 use: [
51                         "style-loader",
52                         "css-loader", 
53                         "less-loader", 
54                         "postcss-loader", //兼容浏览器加兼容前缀
55                 ]
56             }
57         ]
58     },
59     plugins: [
60         // ⾃动⽣成⼀个html⽂件,并把打包⽣成的js模块引⼊到该html中
61         new HtmlWebpackPlugin({
62             title: '首页',
63             template: "./src/index.html",
64             inject: true,
65             chunks:['index'],
66             filename: 'index.html'
67         }),
68         new HtmlWebpackPlugin({
69             title: '注册',   //生成页面的title元素
70             template: "./src/index.html", //输出的 HTML文件名
71             inject: true,
72             chunks:['login'],
73             filename: 'login.html'
74         }),
75         // 打包前清除dist目录插件
76         new CleanWebpackPlugin(),
77     ]
78 }

需要安装的依赖

  • clean-webpack-plugin:cleanwebpackplugin会在打包结束后帮我们清除/dist文件夹,每次打包时候先清空dist文件夹
1 npm install --save-dev clean-webpack-plugin
  • html-webpack-plugin:htmlwebpackplugin会在打包结束后,⾃动⽣成⼀个html⽂件,并把打包⽣成的js模块引⼊到该html中
1 npm install --save-dev html-webpack-plugin
  • css-loader: 分析css模块之间的关系,并合成⼀个css
  • style-loader:把css-loader⽣成的内容,以style挂载到⻚⾯的heade部分
1 npm install style-loader css-loader -D
  • file-loader:原理是把打包⼊⼝中识别出的资源模块,移动到输出⽬录,并且返回⼀个地址名称
1 npm i file-loader -D
  • less-loader:把less语法转换成css
1 npm i less less-loader --save-dev
  • postcss-loader:兼容浏览器加兼容前缀
1 npm i postcss-loader autoprefixer -D

loader是什么

模块解析,模块转换器,⽤于把模块原内容按照需求转换成新内容。
webpack是模块打包⼯具,而模块不仅仅是js,还可以是css,图⽚或者其他格式
但是webpack默认只知道如何处理js和JSON模块,那么其他格式的模块处理,和处理⽅式就需要loader了

 

posted @ 2021-04-14 10:37  野原欣之助  阅读(156)  评论(0编辑  收藏  举报