创建一个webpcack4.x项目

最新推荐文章于 2022-07-08 09:33:09 发布

原创最新推荐文章于 2022-07-08 09:33:09 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了使用Webpack搭建项目的步骤，包括新建文件夹、初始化项目、创建目录、安装Webpack等。还阐述了webpack-dev-server的配置，如简介、安装、配置文件添加及运行命令设置，最后说明了html-webpack-plugin插件的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建一个文件夹

2.运行`npm init -y` 快速初始化项目（package.json）

3.在项目根目录创建`src`源代码目录和`dist`产品目录

4.在src目录下创建index.html

5.使用cnpm 安装webpack,运行`cnpm i webpack-cli -D`

6.建立如下目录

（在webpack4.x中，有一个特性，约定大于配置，即默认的打包入口路径是Index.js,打包的输出文件是 dist=>main.js目的是尽量减少配置文件的体积）
(webpack4.x中新增了mode选项（必须要有）：可选值为development(开发模式)和 production(压缩文件))
在这里插入图片描述

7.在命令行输入`webpack`即可打包

webpack-dev-server

配置webpack-dev-server：

a. webpack-dev-server简介：

是一个小型node.js express服务器

新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器

启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

两种自动刷新方式：

iframe mode
在网页中嵌入了一个 iframe ，将我们自己的应用注入到这个 iframe 当中去，因此每次你修改的文件后，都是这个 iframe 进行了 reload
命令行：webpack-dev-server，无需–inline
浏览器访问：http://localhost:8080/webpack-dev-server/index.html

inline mode
命令行：webpack-dev-server --inline
浏览器访问：http://localhost:8080

b. 安装webpack-dev-server
npm install webpack-dev-server --save-dev

可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）

c. 在webpack.config.js中添加配置

var webpack=require('webpack');
module.exports = {
……
devServer: {
historyApiFallback: true,
inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},
plugins:[
new webpack.HotModuleReplacementPlugin()
]
};

d. 在package.json里配置运行的命令（npm支持自定义一些命令）
"scripts":{"start": "webpack-dev-server --inline"//注意：不写--hot，否则浏览器无法自动更新},

e. 运行server

npm start

Error: …（此处省略一堆错误）

解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）
npm install webpack

浏览器打开http://localhost:8080/
成功运行，且修改app中的js代码，浏览器会自动刷新！成功！

注意点：

//--open 默认打开浏览器 --port 指定端口 --host 指定域名
 "dev":"webpack-dev-server --open --port 3000 --inline --hot --host 127.0.0.1"、

8.配置html-webpack-plugin插件

（1）先运行npm install html-webpack-plugin -D
（2）再将其写入webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//导入在内存中自动生成index页面的插件

const htmlPlugin = new HtmlWebpackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的内存中首页的名称
})
module.exports = {
    mode : 'development',
    plugins:[
        htmlPlugin
    ]
}