webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误

补光捉影 發表於 2019-6-12 13:57:00

webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误

<h2>一、前言</h2>
　　找了一个视频教程开始学习webpack，跟着视频学习，在自己的实际操作中发现，出现了很多问题。基本上都是因为版本的原因而导致，自己看的视频是基于webpack 1.x版，而自己现在早已是webpack 4.X了。觉得学习还是要以最新的来，也许以后并不会再接触到1.x的。不过了解不同版本更迭的问题，也是一个学习过程，更加了解这个东西。这个文章主要是针对一次js打包体验中出现的许多问题，更多的在于对webpack的一次认识。
<h2>二、正式使用webpack前的准备</h2>
我们需要新建一个项目来练习webpack的打包。
　　1、利用命令行创建文件夹，进入指定目录下新建一个文件夹。
<div class="cnblogs_code">
<pre>cd vueDemo//我日常练习的目录
mkdir webpack-test //新建一个名为webpack-test文件夹</pre>
</div>
　　2、使用webpack需要在项目中安装webpack的依赖包，所以需要一个package.json文件。
　　　　package.json里面包括当前项目的依赖模块、自定义的脚本任务等信息，是一个标准的npm说明文件。我们可以通过npm init命令自动创建这个package.json文件。
<div class="cnblogs_code">
<pre>//进入webpack-test文件夹，初始化npm 
cd webpack-test
npm init </pre>
</div>
　　　　输入这个命令后，会有一系列信息填写选择（非必须），诸如项目名称、项目描述、描述、作者等信息，如果不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。如下图（一）：
            <img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612133839761-1312856828.png">
此时项目里便会生成package.jso文件。
<h2>三、在文件夹里安装webpack</h2>
package.json文件已经创建好了，我们在本项目中安装Webpack作为依赖包。Webpack可以使用npm安装
再当前文件夹（即webpack-test）输入以下命令：
<div class="cnblogs_code">
<pre>//全局安装（只需要安装一次，以后每个项目就不需要重新全局安装）
npm install -g webpack
//作为项目开发依赖，安装到你的项目目录
npm install --save-dev webpack</pre>
</div>
其中参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中，包安装在指定项目的node_modules文件夹下。
虽然已经全局安装了webpack ，但是我们通常还是会在项目中安装局部的webpack，为了安装各自需要的模块。这样的好处是局部项目安装可以让每个项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等，保证不同版本包之间的相互依赖，这些优点是全局安装难以做到的。简而言之就是，减少了对运行环境的配置工作，无论是对开发还是发布/后续维护升级都大大减轻了工作量。
下面就是package.json文件打开后的样子，以json格式存储下了当前项目的配置信息。目前依赖有一个webpack。如图（二）：
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612134356624-1515827390.png">
<h2>四、尝试打包一个js文件（4.x版本以及低版本）</h2>
 此时我们可以初步体验一下用webpack打包一个js，因为看的视频版本较老，所以会报一些由于版本问题而导致的错误（低版本的尝试）。
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612134632053-670467237.png">
 出现这个的原因还是因为版本原因。在网上查到说：
In webpack3, webpack itself and the CLI for it used to be in the same package ,but in version4,they've separated the two to manage each of them better .
（在webpack3中，webpack本身和它的CLI都是在同一个包中，但在第四版中，为了更好的管理，将它们分开了）
而目前我的webpack用的是4.x版本，而教程上的是1.x版本。所以我们之前只安装了webpack，对于新版本还需要我们单独的安装cli。
<div class="cnblogs_code">
<pre>//全局安装
npm install webpack-cli -g </pre>
</div>
安装完成后，继续尝试打包。依旧死心不改的用这个打包语句(当初并不知道还是会继续报很多的错，现在看来真的是不懂的时候最执着。)
<div class="cnblogs_code">
<pre>webpack hello.js hello.bundle.js </pre>
</div>
期待的成功并没有出现，有了warning 和 error，都是因为版本的原因。如下图（四）所示：
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612134738978-837177002.png">
 第一个黄色警告，说没有设置模式。 程序员怕啥warning，解决了error再说，着急想看看打包后的样子。 WARNING in configuration  The 'mode' option has not been set
第二个红色错误，error in multi ./hello.js hello.bundle.js 出现这个原因是版本过低，命令已经不适用了。我目前看的视频讲解时1.x的版本，而我目前用的版本是4.x 。在webpack 4.0 之前，打包命令为npm hello.js hello bundle.js  但是，如果安装的是最新的webpack，需要使用 webpack hello.js -o hello.bundle.js 进行打包，改变语句，继续尝试。
<div class="cnblogs_code">
<pre> webpack hello.js -o hello.bundle.js </pre>
</div>
尽管还是出现了warning，如下图（五）所示。本着不怕warning的想法，看了一下项目目录，惊喜发现已经生成了hello.bundle.js文件。虽然有了文件，打开后发现文件末尾并没有包含hello.js的任何内容，所以还是得把warning解决了才行。 
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612134930733-1189396231.png">
出现这个的原因是webpack4引入了模式,有开发模式,生产模式,无这三个状态，我们需要选择。
解决这个warning，需要在配置文件package.Json添加上"dev"和"build"这两个信息以及他们的值。
webpack4允许我们指定编译使用开发模式还是生产模式，这由mode这个配置来控制，value为枚举值：development/production，分别对应开发模式和生产模式。（这个配置可以作为命令行的配置参数也可以作为配置文件中的一个配置项，默认值是production，即生产模式）
命令行配置参数示例：
<div class="cnblogs_code">
<pre>webpack hello.js -o hello.bundle.js --mode development</pre>
</div>
如果只是尝试一下，这样子其实就已经成功完成了打包，可以看到项目里生成的hello.bundle.js。但是按着一些教程，会发现大家并没有直接这样做，而是去配置package.json文件。
 配置文件的配置项示例：
<div class="cnblogs_code">
<pre>// 在package.json的script中加上dev和build
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
//开发模式--mode development
//生产模式--mode production</pre>
</div>
<div> 两者明显的区别是对于打包后的js文件有无压缩，开发模式是没有压缩的，生产模式是有压缩过的。在开发阶段有必要引入开发模式，不要代码压缩混淆，源码支持调试。</div>
<div>配置好了以后，我们打包就不用再写之前的那种打包语句，直接用npm run dev 或 npm run build即可。 </div>
<div class="cnblogs_code">
<pre>npm run dev</pre>
</div>
依旧报错，有一种无穷无尽错误的感觉。如下图（六）：
 <img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612135207976-1241452478.png">
错误原因是： 当我们输入命令 npm run dev 的时候,会默认打包src文件夹下的index.js文件,打包完成后是main.js文件(放在dist),
然而我们之前只是尝试打包一个js，并没有全局的概念，不知道webpack需要什么基础的配置。所以也没在项目添加其他的东西，到了这一步，不得不面对。
现在我们需要手动创建；
先创建src文件.还有一个dist文件,存放默认的打包生成的文件, 然后在src里再创建index.js文件。
创建好之后，我们再一次执行npm run dev 试着打包一次。
按着网上无数的教程，到这里它们都成功了，然而我依旧是重复报上面的错误，到现在还不知道是什么原因导致的。原因找到了，很简单就是自己是非常的不细心，单词拼错了！！！以后要切记切记！!!细心阿！！！看到有一个博客里说，如果依旧出现问题，请使用下面的打包命令，也即我之前写的命令行配置参数的语句。我不太清楚他这个到底是因为什么出现的问题。
所以没办法，我就用了我之前的命令行配置参数的语句。
<div class="cnblogs_code">
<pre> //打包指定目录下的指定文件，并以指定的目录和指定的文件名输出，路径需要自己分清楚，
//其中src是存放源文件的目录， dist是存放打包后输出文件的目录。
//命令如下：
　　webpack ./src/xxx.js -o ./dist/xxx.js --mode development
　　//也可以使用：
　　npx webpack ./src/xxx.js -o ./dist/xxx.js --mode development
　　//与上边的命令相比，就开头多了一个npx，这个区别嘛，还没理解好。</pre>
</div>
下面是我打包的操作示例：
<div class="cnblogs_code">
<pre>webpack src/index.js -o hello.bundle.js --mode development</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612135351302-1599871739.png">
<div class="cnblogs_code">
<pre>npx webpack src/index.js -o hello.bundle.js --mode development</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190612135410468-695415048.png">
其中的一些参数值:
Hash:哈希值
Version:webpack版本
time:这次打包所花费的时间
列表信息
Asset:指这次打包这次生成的文件
Size:这次生成文件的大小
Chunks:这次打包的分块
chunk Names:这次打包的块名称。
<h2>四、尝试将css引入文件并打包 </h2>
新建一个css文件，并引入js文件中，然后进行编译。如下图所示：
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190613094226924-360278099.png"><img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190613101529243-1410874909.png">
然后会提示错误（如下图），我们需要一个合适的loader去处理这种文件。
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190613100017284-400689110.png">
 webpack本身不支持css类型的文件。所以我们需要引入相应的loader。
<div class="cnblogs_code">
<pre>npm install css-loader style-loader --save-dev</pre>
</div>
安装完成之后，如果不做其他的处理，直接继续npm run dev 依旧会报错。因为我们虽然安装了css-loader style-loader 但是在引入css文件的时候并没有指定loader来处理，所以仍然会报错。
我们需要将文件里的require("./style.css");改为:require("style-loader!css-loader!./style.css"); 
注：
1、css-loader是为了使webpack能处理css文件，style-loader是把css-loader处理完的文件内容在HTML中新建一个style标签插入到html里面。
2、loader的加载顺序是从右往左。所以顺序不能写错了。
如下图所示：
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190613110109631-1368057237.png">
然输入npm run dev  打包成功。（如下图）
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190613110356698-959246283.png">
为了更直观的查看打包后的文件是否正常使用，可以在项目中新建一个html页面，在其中引入打包后的js文件，然后可以在浏览器中发现样式和js都正常加载了，页面中生成了style样式。
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190613131716953-310144288.png">
 
<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190613131644142-1876280511.png">

</div>
<div id="MySignature" role="contentinfo">
不要忘了自己为了什么前进 
来源：https://www.cnblogs.com/songForU/p/11009218.html

頁: [1]

琼殿技术论坛's Archiver

webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误