webpack打包方法总结

第一次使用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中写入一下片段：

            
                
                     
                            
                           
                     
                      
                            

                            

                     
                     

                

        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

                

配置警告： 
“mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。

multi错误 ./ hello.js bundle.js

未发现模块：错误：无法解析’C:/Users/你的用户名/Desktop/webpack-test’中的bundle.js

@ multi ./hello.js bundle.js

               

这里提示我们存在的第一个问题是没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：

                webpack --mode development

或者

       webpack --mode production。

这样便能够实现将'./src/index.js'打包成'./dist/main.js'。 

不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：

                "dev":"webpack --mode development",

       "build":"webpack --mode production"

以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。 

我们在根目录执行：

               npm run dev

然后就终于可以打包好了。这篇只是自己在打包的时候遇到的一些情况做的笔记，所以可能有一些问题，欢迎各路大神指教。

在进行打包的时候参考了三篇博客

https://blog.csdn.net/u012443286/article/details/79504289

https://segmentfault.com/a/1190000013699050

https://blog.csdn.net/u012631731/article/details/73716951/