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)  编辑  收藏  举报