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

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

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


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

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

v2-234a01cd3e82fc6d1987de0492fd943c_b.jpg
运行结果中可以看出项目的信息

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

v2-db693f4edd44174bc6fa0fa12e4a97c0_b.jpg
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

v2-29106c74974db4f8515a79250a7d6c84_b.jpg
以后的安装经常会有warning,一般直接忽略就行

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

v2-f0aa8c0308c534af1ca3ae3a663cb110_b.jpg
看到了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 -Dnpm i webpack-cli -D


webpack-dev-server的配置

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

安装的注意事项

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

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

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

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

v2-95c539d47e78601b538e22edd82bb4d8_b.jpg

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

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

常用命令

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

文件配置

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

v2-547ae7039108cc07a3cac60f8acd1fe2_b.jpg

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

v2-ce50fe41438b3a297fecb2f66ffb6e2a_b.jpg

参数说明:

v2-7f8267df49e97f2c43318573005e2858_b.jpg

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

  • 在webpack.config.js

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

v2-80f0e91752c54970295322e0958e1391_b.jpg

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。

v2-f4e280a4d295d50c17a65822a0c5a375_b.jpg

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

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

v2-6e0906de39e8d0810611464da5848158_b.jpg
符合预期

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

待更新......