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了