webpack基础使用-01

秒速五厘米 2023-07-20 13:46 5阅读 0赞

# webpack基础使用-01 #

想要了解更全面可以去官网https://www.webpackjs.com/concepts/对应api来了解

## 1. 初始化项目 ##

首先新建项目目录，在终端中打开输入：

npm init -y

初始化项目，这时项目中会出现package.json文件，这时项目的基本文件格式  
![在这里插入图片描述][20200402091304405.png]  
main.js->为项目的入口文件，dist->项目打包后输出的文件夹。

## 2. 打包 ##

在建好文件夹后将main.js（写点测试代码）打包输出到dist文件夹中的bundle.js 中，使用命令：

webpack src/main.js -o dist/bundle.js --model development

此命令会去寻找项目中是否有 dist/bundle.js 如果没有就会自动创建，由于该命令比较繁琐不利于开发，所以可以使用 webpack-dev-server 工具进行配置

npm  i webpack-dev-server -D

此时在项目的根目录新建一个 webpack.config.js 文件来配置打包的一些设置。建好文件后在文件中编写：

var path = require('path')
    
    module.exports = { 
    
      mode: 'development',
      entry: path.join(__dirname, './src/main.js'), //入口，表示要使用 webpack 打包哪个文件
    
      output: { 
        path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
      }
    }

此时在终端中输入

webpack

效果就和之前的那一长串命令一样了（此时不能进行实时打包）

在package.json配置相关命令实施热更新打包

"scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
      },

webpack-dev-server 这个工具，如果想要正常运行，要求在**本地**项目中，必须安装webpack和 webpack-cli  
运行命令

npm i webpack -D
    npm i webpack-cli -D

此时在运行就可以打开你在package.json 中 --contentBase 所编写的初始文件入口 这里我写的是src那么会打开 index.html 文件

npm run dev

此时在你正确在index.html中引入 bundle.js 脚本时，会报错  
![在这里插入图片描述][20200402091549377.png]  
这是因为webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘中；而是直接托管到了 电脑的内存中，所以，我们在项目根目录中找不到 这个打包好的 bundle.js;  
我们可以认为， webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是我们可以认为，和 dist src node\_modules 平级，有一个看不见的文件，叫做 bundle.js。

解决方法有两种1.直接将index.html引入bundle.js的路径改为 …/bundle.js. 2.可以将整个html都放到内存中，这时需要在本地安装一个工具 html-webpack-plugin(装插件前先停掉webpack-dev-server --Ctrl+c

npm i html-webpack-plugin -D

装好后在 webpack.config.js 里进行相应的配置

var path = require('path');
    
    var htmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = { 
    
      mode: 'development',
      entry: path.join(__dirname, './src/main.js'), //入口，表示要使用 webpack 打包哪个文件
    
      output: { 
        path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
      },
    
      plugins: [
        new htmlWebpackPlugin({ 
          template: path.join(__dirname, './src/index.html'),
          filename: 'index.html'
        })
      ]
    }

[20200402091304405.png]: /images/20230528/4216cb9c6aff43c7aa607abc6dc98167.png
[20200402091549377.png]: /images/20230528/11b929c4ac174dd3a25708eeefd5be28.png