文章首发在我的个人博客:http://www.brandhuang.com/article/1586446191183 webpack基础,自己配置 webpack 进行资源打包 这只是我个人学习整理的个人笔记,可以直接跳过前面去看文章中的「参考文章」 纸上得来终觉浅,绝知此事要躬行 请一定动手敲一敲代码,看一看效果 请一定动手敲一敲代码,看一看效果 请一定动手敲一敲代码,看一看效果 一个现代 JavaScript 应用程序的静态模块打包器,当 webpack 处理应用程序时,会递归构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个 bundle。 Webpack 仅能理解 Javascript 和 JSON 文件,需要通过 Loader 来转换 1. 项目初始化 创建文件夹 webpack-demo,进入文件夹执行 从 webpack 4 版本开始,webpack-cli 分离成一个单独的模块,安装 webpack 时还需要单独安装 webpack-cli 不建议全局安装 webpack,采用本地安装的方式 在 webpack-demo 目录下新建 webpack.config.js Simple rule: one entry point per HTML page. SPA: one entry point, MPA: multiple entry points. 一个HTML页面一个入口,单页面一个入口,多页面多个入口 官方地址:entry-context entry 的配置可以是 字符串、数组、对象。 本文所使用的 webpack 版本: 从 Webpack v4 开始,不引入任何配置文件的情况下也可以使用。 在 webpack-demo 下创建 src/index.js,在其中写点内容 执行 npx webpack --mode=development 进行打包。 执行完后,在 webpack-demo 下可看到一个 dist 文件夹,其中的 main.js 文件,即为默认打包后的文件。 查看 main.js 文件 代码还是箭头函数,没有被打包成低版本代码,这不是我们所需要的。此时需要使用 webpack 的 babel-loader 来将代码转换到低版本。 安装 babel-loader 安装 babel 依赖:推荐读下:不容错过的 Babel7 知识 配置 loader 创建 .babelrc 文件,配置 babel loader 是从右向左(或者从下至上)执行的 比如要配置 less-loader,还需要配置 css-loader 和 style-loader,代码如下 webpack 使用 loader 的方式建议阅读官方文档:Webpack Using Loaders 告知 webpack 使用相应的模式进行优化打包,打包出的文件有所不同。 默认值: production 可设置: none、 production 和 development。 OptionDescriptiondevelopmentSets process.env.NODE_ENV on DefinePlugin to value development . Enables NamedChunksPlugin and NamedModulesPlugin .productionSets process.env.NODE_ENV on DefinePlugin to value production . Enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin .noneOpts out of any default optimization options 需要用到插件 html-webpack-plugin 在 webpack-demo 目录下新建 public/index.html 修改 webpack.config.js 安装 cross-env,用来提供一个兼容性好的 scripts 来使用环境变量 具体用法,在 packge.json 中的 scripts 中添加内容 之前编译执行的是 npx webpack --mode=development,现在只需要执行 npm run start 使用到的插件 webpack-dev-server 修改 package.json 配置 webpack-dev-server 官方文档:dev-server 方便我们在控制台看到我们在代码中的console信息或者错误信息的实际行数,方便定位问题,否则控制台会显示编译后的位置,和实际位置打不一样 官方可选参数:devtool配置 修改 webpack.config.js 需要用到插件 less-loader、css-loader 、 style-loader、postcss-loader 和 autoprefixer,后两个是自动添加兼容性前缀。 新建文件 src/index.less 修改 webpack.config.js 推荐在根目录新建 .browserslistrc 文件来配置 postcss-loader 需要用到插件 url-loader 和 file-loader url-loader 处理资源时,将配置的limit限制大小以内的资源以 DataURL 返回 官方文档:url-loader、file-loader 配置 webpack.config.js,参考 vue-cli2.x 构建的项目配置 每次打包时,旧的打包文件不是基本不是我们需要的,所以需要清空文件夹,懒得手动去删除文件夹,需要使用插件 clean-webpack-plugin 每次执行打包后都会清空文件夹中的内容重新生成 修改 webpack.config.js 的 plugins 一个基础的webpack就配置完了 官方文档地址,建议随时查阅巩固:Webpack官网 祭出掘金大佬的三篇文章,从基础到进阶都有,跟着做完肯定有收获 Webpack 的热更新又称热替换 (Hot Module Replacement),缩写为 HMR。 这个机制可以做到 「不用刷新浏览器」 而将新变更的模块替换掉旧的模块。 细节参考:Webpack HMR 原理解析重要提示
Webpack介绍
Webpack核心概念
Webpack 安装与项目初始化
npm init -y
npm install webpack webpack-cli --save-dev
entry 配置
module.exports = {
entry: './src/index.js' //webpack的默认配置
}
module.exports = {
entry: {
app: './src/index.js' // app是输出的文件名,output中配置了filename后,这个名字无效
} //
}
module.exports = {
entry: [
'./src/index.js',
'./src/index2.js'
]
}
output 配置
const path = require('path'); // node提供
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), //输出到的文件夹
filename: 'bundle.js', // 编译后输出的文件名
publicPath: '/' //通常是CDN地址
}
}
Webpack 打包 js 文件
[email protected]
[email protected]
let arr = [1,2,3]
arr.map((item) => {console.log(item)})
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("let arr = [1,2,3]\narr.map((item) => {console.log(item)})\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
npm install babel-loader --save-dev
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime @babel/runtime-corejs3
module.exports = {
module: {
rules:[
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
}
]
}
}
// 配置babel方式一
{
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
// 配置 babel 方式二:在webpack.config.js中配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"],
plugins: [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
},
exclude: /node_modules/
}
]
}
}
module.exports = {
module: {
rules: [
{
test: /\.(le|c)ss$/,
use: ['style-loader', 'css-loader', 'less-loader'],
exclude: /node_modules/
}
]
}
}
设置 mode
将打包后的 js 文件自动添加到 html 中
npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
...,
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html', // 打包后的文件名
})
]
}
npm install crosee-env --save-dev
"start": "cross-env NODE_ENV=development webpack",
如何在浏览器中实时展示效果
npm install webpack-dev-server --save-dev
"start": "cross-env NODE_ENV=development webpack-dev-server",
// webpack.config.js
module.expots= {
...,
devServer: {
port: '8080', //默认是8080
quiet: false, //默认不启用,如果开启了,控制台不会看到除了初始启动信息外的任何console信息,包括错误提示
inline: true, //默认开启 inline 模式,如果设置为false,开启 iframe 模式
stats: 'errors-only', //终端仅打印 error
overlay: true, //默认不启用,是否全屏显示编译的错误信息
clientLogLevel: "silent", //日志等级
compress: true //是否启用 gzip 压缩
}
}
DevTool配置
module.exports = {
...,
devtool: 'cheap-module-eval-source-map' //开发环境下使用,线上设置为 none 或者 source-map
}
编译 less 文件
npm install style-loader less-loader css-loader postcss-loader autoprefixer --save-dev
@color: red;
body{
background-color: @color;
}
module.exports = {
...,
module: {
rules:[
...,
{
test: /\.(le|c)ss$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')({
"overrideBrowserslist": [
">0.25%",
"not dead"
]
})
]
}
}
}, 'less-loader'],
exclude: /node_modules/
}
]
}
}
处理图片/字体文件等
npm install url-loader file-loader --save-dev
module.exports = {
...,
module: {
rules:[
...,
{
test: /\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10240, // 10k,大于 10k 将使用 file-loader
esModule: false, // file-loader的配置,默认使用ES Module,否则使用 CommonJS
}
}
]
}
}
清空 dist 文件夹
npm install clean-webpack-plugin -D
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
...,
plugins: [
...,
new CleanWebpackPlugin()
]
}
最后
参考文章
一些 webpack 相关面试题
Webpack 的热更新原理
webpack的构建流程
如何提高webpack的构建速度
题目后续还会再收集添加一部分