webpack项目目录结构_webpack项目配置流程

最近突然发现前端特别好玩，就当做给自己放个小假，试着记一点前端的笔记。

自学vue.js时遇到的webpack项目配置，感觉操作有点琐碎，而且由于笔者看的教程的年代比较久远，许多步骤和指令都已经有变化。

此处以在vscode环境下构建webpack项目为例

创建文件夹，用vscode打开文件夹。
在命令行内输入npm init -y（注意，打开的文件夹和以后内部创建的文件都必须是英文，否则会报错）；通过npm init -y 生成项目的配置文件package.json。（-y中的y是yes的缩写）

运行结果中可以看出项目的信息

3. 在目录中如此创建文件结构：

dist下的bundle.js文件是在下一步生成的，不要我们创建

然后我们在main.js中随便写一句测试代码：

//main.js
console.log("hello world")

4. 全局安装webpack，在命令行中执行 npm I webpack -g；然后在项目中测试webpack，将main.js装换成bundle.js（全局打包），指令为webpack ./src/main.js -o ./dist/bundle.js

以后的安装经常会有warning，一般直接忽略就行

5. 在index.html文件中导入bundle.js文件作为脚本代码（也就是在index.html的head标签下加入<script src="../dist/bundle.js"></script>），并在浏览器中查看效果。

看到了hello world的打印信息，说明之前的步骤没问题

6. 因为懒，每次全局打包都需要输入webpack <源文件> -o <目标文件>的指令，我们希望可以直接按webpack就可以把main.js打包到dist文件夹的bundle.js中。为了做到这种效果，我们在与package.json同级的目录下创建一个webpack配置文件：webpack.config.js，内部代码与注释如下：

// 由于webpack是基于Node进行构建的，所以在webpack的配置文件中，任何合法的Node的代码都是支持的

然后我们在终端直接运行webpack指令就可以达到和输入webpack <源文件> -o <目标文件>一样的效果。

7. 我们可以通过配置webpack文件来设置快捷指令来快速全局打包，但是每次改完代码都要输入 webpack 打包，再在刷新浏览器观察效果，这样还是麻烦。为了更快更方便，我们还可以用一个神器插件 webpack-dev-server 来更加快速的调试代码。安装指令：npm i webpack-dev-server -D（-D中的D笔者认为是 package 中的 devDependencies 的D，意思是安装到依赖库的文件夹中）。为了避免后续的错误，建立再本地安装如下两个依赖库：npm i webpack -D 和 npm i webpack-cli -D

webpack-dev-server的配置

承接上面的第7步，如果你已经完成了上述的7个步骤，就可以开始配置文件来达到使用懒人插件webpack-dev-server插件的目的。

安装的注意事项

使用 webpack-dev-server这个工具，来实现自动打包编译项目入口文件（main.js）的功能。

运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖。
安装完毕后，这个工具的用法，和webpack命令的用法完全一样。
由于我们是在项目中，本地安装的webpack-dev-server, 所以无法把它当做脚本命令，在powershell终端中直接运行（只有那些安装到全局 -g 的工具，才能在终端中正常运行）。
注意：webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中，必须本地安装webpack（每次新开一个项目，都要安装）。
通过npm run dev来执行脚本（也就是开启实时渲染的功能）。
webpack-dev-server帮我们打包生成的bundle.js文件，并没有保存到实际的物理磁盘上；而是直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的bundle.js。
我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了我们的项目的根目录中，虽然我们看不见，但是可以认为和dist src node_module平级，有一个看不见的文件叫做bundle.js。这么做的目主要是为了快。

上面的1-7在说一些注意事项，具体操作请看下面：

首先，我们需要把index.html中的引用脚本改一下，原来我们引用的JS文件是webpack打包生成在dist文件夹下的bundle.js，如果你认真地看了上面的1-7的注意事项，你应该明白我们需要引用的那个JS文件应该是托管在内存里面的bundle.js文件。所以我们需要把原来的代码改成下面青色框框中的。

在浏览器下输入http://localhost:8080/src就可以看到效果了。

其中的8080是默认的端口，可以在配置文件中修改。

常用命令

打开项目后，为了打开前端服务器让webpack-dev-server实时渲染我们的html文件，需要运行的指令为：npm run dev。（在后面的文件配置好后再运行这个指令）
让前端服务器停止的指令为Ctrl+C

文件配置

package.json中配置

为了在控制台中执行dev命令（即成功运行npm-run-dev指令），我们需要在package.json文件中的scripts下加入对象"dev": "webpack-dev-server"

2. 一些方便操作，提高运行效率的参数：

参数说明：

我们把2.下的配置参数全部清空，再尝试一种新的配置文件的方式：

在webpack.config.js

将上述的--<指令> <参数>的形式写成键值对就行了

style-loader与css-loader

我们先在src文件夹下创建一个存放css文件的文件夹css，在这个文件夹中创建一个决定主页面样式的样式表index.css，把网页主体的背景色改成笔者最喜欢的9999ff。

/* index.css */
html, body {
    background-color: #9999ff;
}

然后我们在main.js中引用它：

//main.js

输入npm run dev，最后发现报错了。这是因为webpack并不负责解析编译css文件。我们按下Ctrl+C退出，试图寻求解决方法。

在webpack项目中，我们如果需要在index.js中加载外部的CSS样式表，可以在main.js中加入import语句导入外部的CSS样式表的相对路径，但是这样我们再启动浏览器时会报错。原因是webpack本身就只是为了JavaScript，CSS样式表它解析不了，所以无法import。

此时我们需要安装第三方库style-loader与css-loader来解决，安装指令：npm i style-loader css-loader -D。

安装完后，我们需要更改配置文件，来让css样式表被索引时能找到上面的两个库作为webpack的loader。

加入module模块，其中加入一个对象rule，rule的值是一个列表，其中的/.css$/是正则表达式，用来匹配所有的以.css结尾的文件发出的请求，如果匹配到了，那么就使用use对象中的两个库（两个库是从右往左索引的）

最后输入npm run dev看看有没有成功：

符合预期

至此，webpack项目的基本的配置工作完成。

待更新......