简单了解webpack打包流程
- WBOY转载
- 2022-08-09 09:52:061561浏览
本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了webpack打包流程的相关问题，webpack是一个用于现代JavaScript应用程序的静态模块打包工具，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
webpack ：是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
这段话有三个重点：
打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任
1、创建一个新项目，然后执行
npm init
2 、全局安装webpack以及webpack-cil
npm install -g webpack npm install -g webpack-cil
3、将webpack安装到项目依赖，这样就可以使用本地版的webpack
npm install webpack -save-dev npm install webpack-cil -save-dev
4、创建最外层的webpack.config.js，改变默认设置
作用：是为了方便不用每次打包的时候都输入目录地址，而是直接webpack即可
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js', // 指定打包入口文件
output: {
filename: 'index.js', // 指定打包输出文件名
path: path.resolve(__dirname, './public'), // 指定打包输出路径
},
module: { // 对模块的处理逻辑
rules: [ // 一系列的加载器的处理逻辑
{
test: /\.css$/, // 正则 匹配到文件后缀
use: [
'style-loader',
'css-loader',
], // 用此加载器处理匹配到的文件
exclude: [ // 排除此文件夹下的文件
path.resolve(__dirname, './node_modules')
]
}
],
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
removeAttributeQuotes: true,
},
hash: true,
}),
new webpack.EnvironmentPlugin(
{
NODE_ENV: 'development',
TEST: 'true',
}
),
new CopyPlugin({
patterns: [
{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},
],
}),
],
// 配置webpack服务
devServer: {
port: 8000, // 启动服务监听端口
host: 'localhost', // 可以通过localhost访问
open: true, // 自动打开浏览器
hot: true, // 启动热更新
},
};
5 、安装HtmlWebpackPlugin
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中
npm install --save-dev html-webpack-plugin
6、安装CopyWebpackPlugin
该插件是将需要的文件打包copy到你所需要的地方，我之所以安装此插件，是因为我打完包之后，css并没有打包成功，之后尝试了很多方式还是没有成功，只能手动执行这个将css包copy过去
npm install copy-webpack-plugin --save-dev // 安装
// 使用 from 和 to就是 将form地方的文件copy到to地方
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
{ from: "other", to: "public" },
],
}),
],
}; // webpack.config.js
7、两种打包方法
webpack --mode development // 开发模式 不压缩 webpack --mode production // 生产模式 压缩
8、安装webpack-dev-server
npm install --save-dev webpack webpack-dev-server
const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
9、进行打包之后，启动项目：
"scripts": {
"test": "mocha",
"start": "webpack-dev-server",
"dev": "webpack --mode development"
},// 在package.json 里面进行配置
// 然后执行
npm run start // 项目启动&热更新
npm run dev // 再次打包
npm run test // 执行测试
【相关推荐：javascript视频教程、web前端】
以上是简单了解webpack打包流程的详细内容。更多信息请关注PHP中文网其他相关文章！