這篇文章為大家帶來了關於javascript的相關知識，webpack 是一個現代JavaScript 應用程式的靜態模組打包器(module bundler)，下面一起來看看JavaScript webpack5配置及使用基本介紹，希望對大家有幫助。
【相關推薦：javascript影片教學、web前端】
##一、webpack
webpack.config.js
module.exports = {
entry: './src/main.js'
};output 屬性告訴webpack 在哪裡輸出它所建立的bundles，以及如何命名這些文件，預設值為./dist。
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
//__dirname是当前目录根目录
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};module.exports = {
//...
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] }
]
}
};const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
//...
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;template)頁面在打包的目錄中自動產生一個對應的html文件，並且自動插入打包生成js文件的script標籤（正常webpack打包並不會產生html檔）。
module.exports = {
mode: 'production'
};
接着我们创建基本的项目结构和文件。
my-webpack-demo
├── src
| └── index.js（入口文件）
├── utils
| └── time.js（时间工具）
├── package-lock.json
├── package.json
├── webpack.config.js（webpack配置）
其中utils下的time.js负责生成当前时间 time.js:
var time = new Date();
var m = time.getMonth() + 1;
var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
module.exports = {
now: t,
};入口文件index.js:
import { now } from "../utils/time.js";
document.write("现在是: " + now);webpack配置文件webpack.config.js:
module.exports = {
entry: "./src/index.js",
mode: "development",
output: {
filename: "index.js",
},
};我们在终端执行打包命令：
此时webpack自动在项目中创建了dist目录，并生成了打包好的index.js文件，那么我们如何验证index.js文件是否有效呢？
由于webpack并不会自动生成html文件，还记得上面的html-webpack-plugin插件吗？
通过npm安装：
在配置文件中引入：
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通过 npm 安装
module.exports = {
entry: "./src/index.js",
mode: "development",
output: {
filename: "index.js",
},
plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", scriptLoading: "blocking" })],
};记得在src下创建index.html模板：
欧克！我们再次执行打包命令npx webpack 。
可以看到，在dist目录下不仅生成了index.js，还有index.html，我们在浏览器中打开它。
time.js成功生效咯 ！
我们完成了一个非常简单的webpack项目，你是否发现了这和vue项目的打包流程十分相似呢？
只是vue-cli的功能是十分强大的，例如可以解析vue文件，热更新等等……
所以这也验证了开始说的，vue-cli是对webpack的二次封装，封装了许多loader和plugin，并且配置好了入口，出口等配置信息，我们可以拿来就用。
【相关推荐：javascript视频教程、web前端】
以上是JavaScript webpack5配置及使用基本介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
