网站开发 问题解决,自建站有哪些,网站上线怎么做,阳城网站建设Webpack和打包过程 学习webpack主要是为了了解目前前端开发的整体流程#xff0c;实际开发中#xff0c;我们并不需要去手动配置#xff0c;因为框架的脚手架都已经帮助我们完成了配置 内置模块path 该模块在Webpack中会经常使用 从路径中获取信息
const path require(实际开发中我们并不需要去手动配置因为框架的脚手架都已经帮助我们完成了配置 内置模块path 该模块在Webpack中会经常使用 从路径中获取信息
const path require(path);
const pathStr D:/Mrzhang/Study/前端/node/code/zc_test/src/index.js;//获取文件的父文件夹
console.log(path.dirname(pathStr)); //D:/Mrzhang/Study/前端/node/code/zc_test/src
//获取文件名
console.log(path.basename(pathStr)); //index.js
//获取扩展名
console.log(path.extname(pathStr));//.js将多个路径拼接在一起相对路径
const path require(path);
const pathStr1 ./src/view;
const pathStr2 ../index.js;
const pathStr3 ./index.js;console.log(path.join(pathStr1, pathStr2)); //src\index.js
console.log(path.join(pathStr1, pathStr3)); //src\view\index.js将多个路径拼接在一起返回绝对路径
使用 **path.resolve()**方法进行拼接当遇到 /xxx即为终止的解析生成绝对路径在 **resolve()**方法中里面的路径会从右往左进行解析直到生成一个绝对路径就会停止在所有 路径都解析完成之后还没有生成绝对路径就会使用当前工作目录路径中零长度的path会被忽略
const path require(path);console.log(path.resolve(/src, /txt.js)); //在txt.js就会停止解析 D:\txt.js
console.log(path.resolve(/src, ./txt.js)); // 在/src停止解析D:\src\txt.js
console.log(path.resolve(/src/view, ../txt.js)); //D:\src\txt.js认识Webpack
官方的解释Wevpack是一个静态的模块化打包工具为现代的JS应用程序实际上会将我们编写的代码打包成静态的资源打包webpack可以帮助我们进行打包它是一个打包工具静态webpack可以将我们的代码打包成静态资源**模块化**webpack默认支持各种模块化开发ESModule、CommonJSAMD等**现代的**因为前端的不断发展面临着各种各样的问题催生了webpack的出现 Webpack使用前提 webpack的中文官方文档 中文文档 Webpack的运行是依赖Node环境的所以电脑上需要右Node环境
Webpack的安装
webpack的安装目前分为两个webpack和webpack-cliwebpack主要用于代码中使用通过代码对代码进行打包webpack-cli主要用于命令行中使用通过命令行对代码进行打包npm install webpack webpack-cli进行局部安装若有需要可以进行全局安装
Webpack配置文件
当我们在命令行执行 webpack命令Webpack会默认去寻找目录中的 src/index.js文件并将该文件以及该文件引用的其他依赖进行打包生成 dist文件夹里面包含 main.js 而默认的打包行为不能满足我们的需求因此这时候可以在项目目录中创建webpack的配置文件 webpack.config.js
const path require(path);//导出配置信息
//因为webpack基于node所以使用CommonJS
module.exports {//需要对哪个文件进行打包entry: ./src/main.js,//打包后的文件名文件夹名称以及路径output: {filename: bundle.js,//这里的path需要使用绝对路径因此需要使用node中的path模块path: path.resolve(__dirname, ./dist),},
};当我们在命令行输入 npx webpack后 webpack就会寻找 webpack.config.js中的配置信息完成代码的打包 而每次输入 npx webpack会很麻烦因此我们可以在 package.json文件中的 scripts属性进行配置
scripts: {build:webpack},之后我们就可以通过输入 npm run build进行文件的打包
css-loader的使用 Webpack默认是可以打包js文件的但是对于其他文件在默认情况下不能进行打包 因此在打包其他文件的时候需要用到对应文件的loader css也不例外 首先应当先安装 css-loader npm install css-loader安装完成后需要在 webpack.config.js进行配置 目的是告诉webpack在遇到 css文件的时候使用哪个loader在 module.exports中创建module对象在 module对象中创建rules规则数组在 rules数组中创建一个又一个的对象用于告诉webpack识别什么文件使用什么loader在 对象中使用test设置识别的文件use使用相关loaderloader有多个内容的时候是从后往前识别的先识别后面再识别前面
const path require(path);//导出配置信息
//因为webpack基于node所以使用CommonJS
module.exports {entry: ./src/main.js,output: {filename: bundle.js,//这里的path需要使用绝对路径因此需要使用node中的path模块path: path.resolve(__dirname, ./dist),},//在module设置不同文件的loadermodule: {//因为loader会有很多所以采用数组的方式rules: [{//告诉webpack匹配什么文件//在后面使用正则表达式test: /\.css$/,//使用什么laoder处理//使用数组类型因为一个文件有可能使用多个loader//css-loader仅是可以识别css文件并不能将样式添加进去//style-loader是将样式添加到元素中//因为先识别css-loader所以要写在后面use: [{ loader: style-loader }, { loader: css-loader }],},],},
};
对less文件处理 与处理css文件类似 首先通过 npm install less-loader安装less-loader之后对 webpack.config.js进行配置
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},module: {rules: [{test: /\.css$/,use: [{ loader: style-loader }, { loader: css-loader }],},{//匹配less文件test: /\.less$/,//先对less文件进行解析//将less文件生成的css进行解析//最后将样式进行解析//这是简写use: [style-loader, css-loader, less-loader],},],},
};
postcss-loader 这是一个工具可以通过引入插件的方式将我们写的css自动做一个浏览器的适配注意需要安装相关插件 首先使用 npm install postcss-loader安装post-loader之后在 module中引入 post-loader即可
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},module: {rules: [{test: /\.css$/,use: [{ loader: style-loader }, { loader: css-loader },{loader:postcss-loader}],},{//匹配less文件test: /\.less$/,//先对less文件进行解析//将less文件生成的css进行解析//最后将样式进行解析//这是简写use: [style-loader, css-loader, less-loader],},],},
}; 但是这样引入并不能实现 css样式浏览器适配的打包需要安装其余的插件 通过 npm install autoprefixer安装插件即可 之后对 postcss-loader进行配置
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},module: {rules: [{test: /\.css$/,use: [{ loader: style-loader },{ loader: css-loader },{loader: postcss-loader,//对某个loader进行单独的配置options: {//loader中设置使用的插件postcssOptions: {plugins: [autoprefixer],},},},],},{test: /\.less$/,use: [style-loader, css-loader, less-loader],},],},
}; 同时 postcss-loader的配置可以单独使用一个文件 创建 postcss.config.js 在webpack.config.js使用 **loader:“postcss-loader”**会自动查找 postcss.config.js配置文件
module.exports {plugis: [autoprefixer],
};//在webpack.config.js文件中直接使用loader:postcss-loader即可postcss-preset-env 上面我们用到了postcss的一个插件而postcss-preset-env是将常用的插件集成到了一起 此插件继承了postcss常用的插件包含上面提到过的 autoprefixer使用 npm install postcss-preset-env安装插件在 webpack.config.js文件中使用该插件
module.exports {plugis: [post-preset-env],
};Webpack打包图片 在webpack环境中每一个文件都是模块只需要引入模块即可 import testImg from “./img/test.jpg”; 基本使用 在webpack5之前对图片资源进行打包的时候是需要安装一些loader的raw-loader url-loader file-laoder 在webpack5之后我们可以直接使用 **资源模块类型asset module type**来替代上面的loader即不用单独安装以上的loader 我们仅需在 webpack.config.js的module属性中完成配置即可
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},module: {rules: [{test: /\.css$/,use: [style-loader, css-loader, postcss-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader, postcss-loader],},//对图片资源进行打包设置{test: /\.(png|jpe?g|svg)/,type: asset,},],},
};认识 asset module type 在上面的配置中我们设置了type:asset type的类型有以下设置 **asset/resource:**发送一个单独的文件并导出URL 之前通过file-loader实现 **asset/inline:**导出一个资源的data URI 之前通过url-loader实现 **asset/source:**导出资源的源代码 之前通过raw-loader实现 asset在导出一个data URI和发送一个单独的文件之间自动选择 之前通过url-loader并且配置资源体积限制实现 asset/resource使用该设置会将图片打包成单独的单独的文件放在dist文件夹中通过url进行引入 缺点就是每一张图片都会进行一次网络请求图片资源过多的时候网络请求就会过多 **asset/inline:**使用该设置会将图片设置成base64编码的格式放在 bundle.js文件中 缺点就是当图片资源过大的时候会增加bundle.js文件的体积造成下载资源缓慢 asset会根据图片资源的大小去判断打包成新的文件还是打包成base64编码格式 在 webpack.config.js中进行设置
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},module: {rules: [{test: /\.css$/,use: [style-loader, css-loader, postcss-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader, postcss-loader],},//对图片资源进行打包设置{test: /\.(png|jpe?g|svg)/,type: asset,//设置多大的图片会进行base64编码parser: {dataUrlCondition: {//单位是byte60*1024代表60kb//60kb之前会生成base64编码//大于60kb会打包成单独的文件maxSize: 60 * 1024,},},},],},
};对打包资源图片进行重命名
在 webpack.config.js中进行设置通过 generator进行设置
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},module: {rules: [{test: /\.css$/,use: [style-loader, css-loader, postcss-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader, postcss-loader],},//对图片资源进行打包设置{test: /\.(png|jpe?g|svg)/,type: asset,//设置多大的图片会进行base64编码parser: {dataUrlCondition: {maxSize: 60 * 1024,},},generator: {//占位符//name:源文件名//ext文件名的后缀.png .jpg//hashwebpack生成的hash//前面可以加上路径代表打包之后放到哪个文件夹中filename: img/[name]_[hash][ext],},},],},
}; Webpack对js代码的babel处理 我们知道webpack默认会对js文件进行打包的但是仅仅是将代码进行压缩以及丑化 并不能将ES5的代码转换成ES5的代码保持浏览器的兼容 因此这时候需要用到babel工具 Babel工具
Babel是一个 **工具链**主要用于就浏览器或者环境中将 ES5的代码转换成ES5的代码与 postcss工具类似可以单独使用不用借助于Webpack此处主要学习Webpack中的babel设置在webpack中使用 npm install babel-loader安装Babel工具
Babel预设babel/preset-env 常见的预设有三个env react TypeScript 与postcss-loader类似我们可以单独安装插件进行单独的配置但是随着插件数量的增多有了预设插件 npm install babel/preset-env安装完成之后创建 babel.config.js文件在里面完成配置
module.exports {presets: [babel/preset-env],
};在 webpack.config.js中的配置
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},module: {rules: [{//对js文件使用babel-loader工具test: /\.js/,//会自动去寻找babel.config.js中的设置use: [babel-loader],},{test: /\.css$/,use: [style-loader, css-loader, postcss-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader, postcss-loader],},//对图片资源进行打包设置{test: /\.(png|jpe?g|svg)/,type: asset,parser: {dataUrlCondition: {maxSize: 60 * 1024,},},generator: {filename: img/[name]_[hash][ext],},},],},
};
Webpack文件路径的解析和配置
在我们实际发开中会引入很多不同的依赖通过 import/require的方式进行引入而webpack通过 enhanced-resolve模块对我们引入文件的路径进行一个解析webpack能够解析三种文件路径 绝对路径 此种路径不会再做解析 相对路径模块路径require(“vue”) 在resolve.modules中指定所有目录的检索模块默认值是[“node_modules”]所以默认会从 node_modules中查找相应的文件 那么怎么区分是文件还是文件夹呢 import {name} from “./until” import {name} from “./until.js” 如果是一个文件 如果文件具有扩展名则直接打包文件否则将会使用resolve.extensions选项作为文件扩展名的解析
const path require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},//对文件会自动进行添加后缀//即我们写出import {name} from ./until这样的代码会在until后面自动拼接extensions数组里面的内容resolve: {extensions: [.js, .json, .jsx, .vue],alias: {//最好使用绝对路径//现在 /untils就代表了.src/untilsutils: path.resolve(__dirname, .src/untils),},},module: {rules: [],},
};
如果是一个文件夹 会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找默认值是 [index]再根据 resolve.extensions解析扩展名
Webpack常见的插件和模式
认识plugin
很多人会吧 plugin插件与 Loader弄混Loader是用于特定的模块类型进行转换如对.css .vue .jsx等文件进行转换而 plugin可以用于更加广泛的任务比如打包的优化资源的管理环境变量的注入等等
CleanWebpackPlugin 当我们修改了代码重新打包的时候需要手动的清除dist再重新打包才是最新的 我们可以借助 CleanWebpackPlugin插件完成手动清除dist文件夹的操作 首先我们先安装此插件 npm install clean-webpack-plugin -D 在 webpack.config.js文件中完成配置即可
const path require(path);
//引入插件
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},//使用插件plugins: [new CleanWebpackPlugin()],resolve: { },module: {rules: [],},
};
HtmlWebpackPlugin 在之前的学习中当我们打包一个项目生成的dist文件中并没有html文件此插件的目的就是自动生成一个html文件 首先通过 npm install html-webpack-plugin -D安装此插件之后再 webpack.config.js文件中使用此插件 此插件可以传入 title设置html标题、template设置使用html的模板
const path require(path);
//引入插件
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},//使用插件plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: zhangcheng,//自己引用模板的路径// template: 相对路径,}),],resolve: { },module: {rules: [],},
};DefinePlugin的介绍 此插件已经集成到了 webpack中因此我们直接引入即可 此插件的目的是在打包代码的过程中生成全局变量此插件默认配置了 process.env.NODE_ENV用于区分开发环境和生成环境的
const path require(path);
//引入插件
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { DefinePlugin } require(webpack);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),},//使用插件plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: zhangcheng,//自己引用模板的路径// template: 相对路径,}),new DefinePlugin({//使用keyvalue形式//value中会当成js代码counter: 11, //2counterStr: 11, //11字符串}),],resolve: { },module: {rules: [],},
};Mode配置
Mode配置选项可以告知 webpack使用相应模式的内置优化 默认值是 production什么都不配置的情况下可选值有none|development|production const path require(path);module.exports {//Mode配置项mode:developmententry: ./src/main.js,output: {filename: bundle.js,path: path.resolve(__dirname, ./dist),
},//使用插件plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: zhangcheng,//自己引用模板的路径// template: 相对路径,}),new DefinePlugin({//使用keyvalue形式//value中会当成js代码counter: 11, //2counterStr: 11, //11字符串}),],resolve: { },module: {rules: [],},
};Webpack搭建一个本地服务器 前面的学习中我们编写完成代码后需要手动执行build命令完成项目的打包效率会很低 通过Webpack搭建一个本地的服务器代码发生变化的时候就自动打包并刷新浏览器 需要借助webpack-dev-server来完成以上操作 首先通过 npm install webpack-dev-server -D安装 webpack-dev-server 在package.json文件的scripts中增加相应的脚本
scripts: {build: webpack,serve: webpack serve},之后运行 npm run serve即可 实际上webpack-dev-server会将代码打包到内存中之后开启一个服务器浏览器访问本地的服务器读取内存中的代码并不会生成本地的文件
HMR模块热替换 当我们只对某个模块发生了改变则只会对改变的模块进行替换添加以及删除等操作从而无需刷新整个页面 HMR通过一下几种方式来提高开发的效率 不重新加载整个页面这样可以保留某些应用程序的状态不丢失只更新需要变化的内容节省开发的时间修改了css、js源代码会立即在浏览器更新 目前webpack是默认开启HMR的 同时我们可以手动开启在 webpack.config.js文件中配置 devServer属性 devServer:{hot:true
}在代码中我们需要指定哪些模块发生变化时进行HMR
//判断是否开启了HMR
if(module.hot){module.hot.accept(./until.js,(){console.log(更新了)})
}本地服务的配置
devServer:{hot:true,//修改端口号port:8888//修改主机host:0.0.0.0//自动打开浏览器open:true//是否对文件进行压缩compress:true
}
