02-通过webpack搭建一个基础的项目

最新推荐文章于 2024-03-19 18:17:34 发布

coder_yihua

最新推荐文章于 2024-03-19 18:17:34 发布

阅读量1.5k

点赞数

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_45737062/article/details/131314545

版权

webpack 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

基础搭建

新建一个空的文件夹。（项目文件夹）
在项目项目文件夹下使用 npm init - y 初始化项目，生成package.json。
安装webpack及webpack-cli：npm i webpack webpack-cli。

创建项目模板。项目文件夹下新建public文件夹，并在文件夹下新建一个html文件作为项目模板。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

创建项目文件夹下创建src文件夹用来存放项目的逻辑代码，并在src文件夹下新建index.js作为项目的入口。

const app = document.querySelector('#app');
app.innerHTML = 'hello webpack'

编写webpack配置文件：webpack.coonfig.js。

const { resolve } = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, './dist')
  }
}

在package.json文件中编写脚本：“build”:“webpack”
经过上述的操作，我们就可以通过npm run build对项目进行打包，并在dist文件夹下可以看到打包后的代码。css配置及服务的启动在下面进行讲解。

使用html-webpack-plugin

在打包之后还需要手动的进行打包后文件的引入，这样很不方便。此时我们可以使用插件来帮我们完成这个工作。使用npm i html-webpack-plugin进行安装。在webpack.config.js中加入下面的代码。

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html'
    })
]

经过上述操作，我们进行打包就可以看到dist文件夹下帮除了帮我们生成bundle.js之后，还生成了index.html文件，此时我们通过浏览器打开生成后的html就可以看到效果了。

使用webpack-dev-server为我们提供一个前端服务

在经过上述操作之后我们的项目还是需要通过open live server来打开html，此时我们可以通过webpack-dev-server来提供服务。

使用：

安装webpack-dev-server：npm i webpack-dev-server -D
在package.json中配置脚本。
```
"serve":"webpack-dev-server"
```
修改webpack.config.js添加mode
```
mode: 'development'
```

经过上述操作，就可以通过npm run serve将项目运行在本地服务。通过浏览器输入服务地址就能看到效果了。

coder_yihua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
02-通过webpack搭建一个基础的项目

经过上述操作，我们进行打包就可以看到dist文件夹下帮除了帮我们生成bundle.js之后，还生成了index.html文件，此时我们通过浏览器打开生成后的html就可以看到效果了。在经过上述操作之后我们的项目还是需要通过open live server来打开html，此时我们可以通过webpack-dev-server来提供服务。对项目进行打包，并在dist文件夹下可以看到打包后的代码。在webpack.config.js中加入下面的代码。文件夹用来存放项目的逻辑代码，并在src文件夹下新建。
复制链接

扫一扫