webpack

最新推荐文章于 2023-03-01 22:38:01 发布

ILove_bugs

最新推荐文章于 2023-03-01 22:38:01 发布

阅读量429

点赞数

分类专栏： Nodejs 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ILove_bugs/article/details/121410374

版权

本文详细介绍了Webpack4.X的配置步骤，包括项目建立、模块和插件配置安装。从新建项目、设置webpack.config.js，到配置HTML模板、处理CSS、图片、less文件，再到压缩JS和CSS代码，实现热更新，全方位覆盖Webpack的基础配置和实践操作。

摘要由CSDN通过智能技术生成

WebPack4.X配置指南

一、简介

（一）WebPack简介

Webpack是一个前端自动化打包工具，根据它的名字也很好理解，web-pack顾名思义就是前端打包工具，它是基于Node和NPM的，所以在安装使用webpack之前，需要安装nodejs，nodejs的版本过低也不行，所以推荐安装nodejs版本为v8.11.2以上，npm版本为v5.6.0以上。

二、项目建立

（一）项目建立

第一步：新建一个文件夹，命名为mywebpack;

第二步：在cmd命令框中使用cd命令切换到mywebpack目录中，输入npm init或npm init -y,创建package.json文件，需要注意的是如果package.json的名称为webpack可能会报错。

第三步：将mywebpack文件夹插入到VSCode等编辑工具中，并在mywebpack根目录下新建一个webpack.config.js文件。

关于webpack.config.js中常见配置项的说明如下：

先做一个默认配置，如下：

const path = require('path');

module.exports = {

entry: path.resolve(__dirname, './src/app.js'), //入口文件

output: {

path: path.resolve(__dirname, './dest'), //打包后的目录

filename: 'dabao.js' //打包后的文件名称

}

注：可以将上面的配置项拷贝到你的webpack.config.js文件中。

第四步：在第三步中的配置内容需要注意两个文件及一个路径：

entry: path.resolve(__dirname, './src/app.js')

path: path.resolve(__dirname, './dest')

filename: 'dabao.js'

path: path.resolve(__dirname, './dest')及filename: 'dabao.js'这两个配置项的意思是webpack打包完成后会在mywebpack项目根目录中自动创建dest目录，dest目录中自动创建dabao.js文件；

entry: path.resolve(__dirname, './src/app.js')是需要你在mywebpack项目根目录创建一个src文件夹,然后在src文件夹中创建一个app.js、m1.js、stu.json文件。

要打包的目录结构及代码如下：

第五步：使用webpack打包第四步中的内容则需要使用npm安装webpack和webpack-cli,在cmd命令框中输入：

npm install webpack@4 webpack-cli -g

第六步：

1、在mywebpack项目根目录下新建src目录，在src目录中新建m1.js文件，m1.js文件内容如下：

exports.xingming = 'lisi';

module.exports.age = 20;

module.exports.fn = function() {

console.log('fn在m1.js文件');

}

2、在mywebpack项目根目录下新建src目录，在src目录中新建stu.json文件，stu.json文件内容如下：

{ "age": 21, "usr": "lisi" }

3、在mywebpack项目根目录下新建src目录，在src目录中新建app.js文件，app.js文件内容如下：

let m1 = require('./m1.js');

console.log(m1);

let stus = require('./stu.json');

console.log(stus);

在命令行终端中执行webpack命令:

在命令行终端中执行完webpack命令后，就会在myapp项目根目录中创建一个dest文件夹，并在dest文件夹新建一个dabao.js文件，如下：

注：打包之后的dabao.js文件可以在前端html文件中使用了(比如：可以在dest目录中新建demo.html文件，然后在demo.html文件使用dabao.js文件)，而src/app.js不能直接在前端html文件中使用。

三、模块和插件配置安装

（一）配置HTML模板

可以安装一个html-webpack-plugin插件来打包html模板（如:在src目录下新建index.html文件，），并将该模板指向对应的入口文件。

安装html-webpack-plugin插件，如下：

npm i html-webpack-plugin@4 -D

然后在mywebpack项目根目录的src目录中新建index.html,其内容如下：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

最低0.47元/天解锁文章

ILove_bugs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack

WebPack4.X配置指南一、简介（一）WebPack简介Webpack是一个前端自动化打包工具，根据它的名字也很好理解，web-pack顾名思义就是前端打包工具，它是基于Node和NPM的，所以在安装使用webpack之前，需要安装nodejs，nodejs的版本过低也不行，所以推荐安装nodejs版本为v8.11.2以上，npm版本为v5.6.0以上。二、项目建立（一）项目建立第一步：新建一个文件夹，命名为mywebpack;第二步：在cmd命令框中使用cd命令切...
复制链接

扫一扫

专栏目录