什么是webpack?
概念:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
参考官网:https://www.webpackjs.com/concepts/
webpack的四大核心概念
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
module.exports = { entry: //入口路径 };
const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), //输出到dest文件夹下 filename:"[name].js" //默认文件名
name 后加-[hash:1] 加上:随机生成长度为1的文件名 为了解决浏览器缓存问题
}
};
mode:development 开发环境 production 生产环境
loader 是打包除了js 以外的文件 可看官网 查询相关loader
总结
webpack是收把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别的js文件
entry
entry: 用来写入口文件,它将是整个依赖关系的根 当我们需要多个入口文件的时候,可以把entry写成一个对象
output
output: 即使入口文件有多个,但是只有一个输出配置
Loader
loader的作用:
1、实现对不同格式的文件的处理,比如说将scss转换为css,或者typescript转化为js
2、转换这些文件,从而使其能够被添加到依赖图中
loader是webpack最重要的部分之一,通过使用不同的Loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理,loader需要在webpack.config.js里边单独用module进行配置,配置如下:
var baseConfig = { // ... module: { rules: [ { test: /*匹配文件后缀名的正则*/, use: [ loader: /*loader名字*/, query: /*额外配置*/ ] } ] }
要是loader工作,我们需要一个正则表达式来标识我们要修改的文件,然后有一个数组表示
我们表示我们即将使用的Loader,当然我们需要的loader需要通过npm 进行安装。例如我们需要解析less的文件,那么webpack.config.js的配置如下:
1、创建webpack.config.js
babel-loader: 让下一代的js文件转换成现代浏览器能够支持的JS文件 ES6 可转ES5 创建.babelrc文件 写入 “presets”:["@babel/preset-env"]
css-loader,style-loader :两个配合使用,用来解析css文件
url-loader file-loader
const path = require("path") const webpack = require("webpack") const webhtml = require("html-webpack-plugin") const webcss = require("extract-text-webpack-plugin") module.exports = { entry: './src/js/index.js', //例如 入口文件路径 output: { path: path.join(__dirname, "dest"), //出口文件配置绝对路径 filename: "js/[name].js" }, module: { rules: [{ test: /.css$/, use: webcss.extract({ fallback: "style-loader", use: "css-loader" }) //完成css的解析 }, { test: /.js$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } //完成js的解析 }, { test: /.gif$/, use: { loader: "url-loader", //完成图片的解析(10分) } }, { test: /.(eot|svg|ttf|woff|log)$/, loader: "url-loader" //完成适量字体图标的解析 }, { test: "/.html$/", use: [{ loader: "html-loader", options: { minimize: true } }] //完成 html的解析 } ] }, plugins: [ new webhtml({ filename: "./index.html", template: "./index.html" }), new webcss("style.css") // new webpack.HotModuleReplacementPlugin() ], devServer: { //通过webpack-dev-server启动服务完成页面接口开发 // hot: true, port: 9090, before(app) { app.get("/list", (req, res) => { res.end("1111") }) } }, }