webpack打包方法总结

最新推荐文章于 2024-09-25 14:58:38 发布

鹤_

最新推荐文章于 2024-09-25 14:58:38 发布

阅读量7k

点赞数 5

分类专栏：前端知识点整理文章标签： webpack打包 webpack打包报错 webpack-cli mode

本文链接：https://blog.csdn.net/weixin_39855431/article/details/80305599

版权

前端知识点整理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文记录了作者首次使用 Webpack 进行纯 JavaScript 打包的过程及遇到的问题。从安装 Node.js 到使用 Webpack CLI，详细介绍了如何解决各种常见错误，并成功生成打包文件。

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

第一次使用webpack进行打包，遇到了很多的坑，老是报错，经过这个查查查，终于打包成功，这里的打包就是单纯打包js，没有和任何的框架配合使用，但是在执行过程中出现了很多的问题，现在已经逐步解决，大概流程了解了，但是还没有和深刻的理解，这里就是先做个笔记，以免以后遇到相同的情况，浪费时间。

1.webpack打包基于node

先下载node，下载地址：https://nodejs.org/en/download/

根据自己电脑的不同型号进行下载即可，下载完之后，根据提示一步一步进行安装就好，有疑问的可以参考这篇文章：https://blog.csdn.net/qq_26562641/article/details/72235585

这篇文章的步骤8以后不需要执行了，因为目前下载的node版本都比较高，所以环境变量不需要手动配置环境变量

打开命令行工具直接查看版本检查是否安装成功,如下

（2）安装成功之后就可以进行webpack的使用和下载了

1.进入到要打包文件所在的目录下执行 npm init，这样就会初始化一个项目包，里面就有了一个package.json的文件生成

2.然后安装一下webpack，既然我们想打包，就要把webpack这个工具安装好，安装方式有两种，一个是全局安装一个是安装在项目中，在项目的package.json目录下执行的命令分别是npm install -g webpack 和 npm install --save-dev webpack，在这里我们安装在项目里面，使用第二种安装方式

3.安装完成之后我们能看到项目目录下有一个node_module的文件夹，然后我们就可以写自己的项目了，我们首先建立一个src和public的文件夹，在src中新建两个文件，分别是test.js和index.js，在pulic中新建一个index.html文件，这样我们的基本项目雏形就产生了

注意：因为我用的是webpack4.0以上的版本，因为webpack4.0以上写法有所改变，打包时会去找src路径下的index.js文件去打包（这里的index.js的命名应该可以在配置中进行改，还没有测），如果不把打包的文件写在src下打包时会报一个./src的错误

4.我们在index.html中写入一下片段：

            <!DOCTYPE html>
                <html lang="en">
                      <head>
                        <meta charset="utf-8">
                          <title>Webpack Project</title>
                      </head>
                    <body>
                        <div id='root'>
                        </div>
                 <script src="bundle.js"></script>
                     </body>

</html>

5.我们在index.js中把test.js的方法导入进来：

var test= require('./test.js');

document.getElementById('root').appendChild(test());

6.下面我们就可以使用webpack工具进行打包了，在项目的根目录，也就是包含node_module的目录下执行下面这个命令node_modules/.bin/webpack src/index.js，这条命令的是使用webpack4.0以上的版本把打包后的文件命名为main.js放在list文件夹下，其中src/index.js是项目的入口。

注意：这里又会出现问题，会报错，如下：

The CLI moved into a separate package:webpack-cli.Please install 'webpack-cli' in addition to webpack itself to use the CLI.->when using npm: npm install webpack-cli -D->when using yarn: yarn add webpack-cli -D

翻译成中文：

                CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。
                  除了webpack自身外，请额外安装webpack-cli来使用CLI。
                  -> 使用npm安装：npm install webpack-cli -D

->使用yarn安装：yarn add webpack-cli -D

其实我们在执行步骤6中的打包命令时，就会提示安装webpack-cli，但是执行yes进行安装后还是会报错，因为旧版本的webpack中， webpack指令要能在命令行中使用，需要全局安装webpack，而不是本地安装，因此这里的webpack-cli也应该是同理。

解决办法就是全局安装一个webpack-cli

我们卸载本地安装的webpack-cli，全局安装webpack-cli：

npm uninstall webpack-cli

npm install -g webpack-cli

然后尝试再次打包，发现又会报错（此处的我已经崩溃，蓝瘦，香菇，不过生活还要继续，坚强！继续看这个错误是什么）。

WARNING in configurationThe 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this enviroment.ERROR in multi ./hello.js bundle.jsModule not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test'@ multi ./hello.js bundle.js