001 webpack的安装配置

最新推荐文章于 2023-04-16 21:49:14 发布

farmer哈哈哈

最新推荐文章于 2023-04-16 21:49:14 发布

阅读量247

点赞数

文章标签： reactjs webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_39058254/article/details/106053488

版权

001 webpack的安装配置

一、新建目录 webpack-base

用vscode打开，并新建终端

二、快速初始化项目

在终端键入

npm init -y

在根目录下自动生成package.json

三、在项目根目录创建项目结构

1.src源代码目录
2.dist产品目录
3.在src目录下新建index.html文件（输入感叹号能够快速新建html文件）
4.在src目录下新建index.js文件（webpack的默认打包入口）
项目结构

四、安装webpack

1.全局运行cnpm(cnpm下载速度比npm下载快)

npm i cnpm -g

2.安装webpack webpack-cli

cnpm i webpack webpack-cli -D

安装完成后，根目录下会有node_modules文件夹
npm后面的参数含义：
-S 安装到上线环境
-D 安装到开发环境
-g 安装到全局
-i install

五、webpack打包

1.根目录下新建webpack.config.js作为webpack打包时的配置文件

module.exports={
        mode:'development' 
        //development  production 模式(production模式会压缩main.js)
        //默认的打包入口路径是./src/index.js 因此不需要配置entry 
}

2.终端输入指令

webpack

打包完成后会在dist目录下自动生成main.js文件

3.在src目录下index.html引入新生成的main.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/main.js"></script>
</head>
<body>
    
</body>
</html>

六、使用webpack-dev-server实现更新实时打包

到第五步时，每一次更新html文件或js文件，都需要在终端webpack重新打包，才能看到页面的变化，极不方便。所以需要安装实时打包

1.安装webpack-dev-server

cnpm i webpack-dev-server -D

2.配置package.json文件，加入"dev"

"scripts":{
		"test": "echo \"Error: no test specified\" && exit 1",
        "dev":"webpack-dev-server"
 }

3.实时编译生成的main.js文件在根目录下，因此需要将html文件中script的src路径改为/main.js

<script src="/main.js"></script>

4.第2步中加入–open等属性能够实现相应的效果

"scripts":{
            "dev":"webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
}

–open自动打开浏览器
–port 3000 端口
–hot 热更新
–host 127.0.0.1 域名

5.运行webpack-dev-server

npm run dev

默认进入的效果如下：
在这里插入图片描述

六、配置默认进入首页

默认进入的是端口路径，可以点击src进入index.html文件，也可配置默认进入首页。

1.安装html-webpack-plugin，该插件可以生成创建html入口文件

cnpm i html-webpack-plugin -D

2.使用插件

在webpack.config.js文件中，导入插件

		const path=require('path')
		const HtmlWebpackPlugin=require('html-webpack-plugin')

创建插件实例

        const htmlPlugin=new HtmlWebpackPlugin({
            template:path.join(__dirname,'/src/index.html'),//源文件 join方法能够拼接路径
            filename:'index.html'//生成的内存中首页的名称
        })

3.配置插件

同样在webpack.config.js文件中，配置插件

	plugins:[
	        htmlPlugin
	]

webpack.config.js文件
现在打开的就是根目录下内存中的index.js文件而不是根目录了

这个插件能够自动追加脚本，即在html文件中自动加入<script src="main.js"></script>
因此不需要我们再加入script

4.重新运行dev，即可实现实时更新。

npm run dev

farmer哈哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001 webpack的安装配置

001 webpack的安装配置一、新建目录 webpack-base用vscode打开，并新建终端二、快速初始化项目在终端键入npm init -y在根目录下自动生成package.json三、在项目根目录创建项目结构1.src源代码目录2.dist产品目录3.在src目录下新建index.html文件（输入感叹号能够快速新建html文件）4.在src目录下新建index.js文件（webpack的默认打包入口）![项目结构](https://img-blog.csdnimg.c
复制链接

扫一扫