简单了解webpack项目构建工具并初步使用

时间:2022-02-08 08:54:02

MarkDownPad练习开始


好了,写点笔记。希望同样是菜鸟的同学,能有一点菜鸟的共鸣~懂得更多的砖头们,快些批评侄指正吧。。。。在此之前,网上有很多教程,首先找一个看看人家配置完成后的文件。有个印象。
webpack:项目构建工具,从开发环境的构建,到项目上线,全过程操作各模块(很多很多),简化和很大效率的提升开发者的开发过程。简化了操作步骤。

更多关于webpack工具的了解,请度娘官网,反正你知道这真的很强大。如果你已经知道了干什么用的,也知道它是那么强大,急需了解构建过程,请看下面。


1.安装webpack

直接了当:npm install webpack -g,建议全局安装,避免不必要的一些麻烦。

2.准备项目环境

首先,在项目文件夹中创建文件夹,app(自己命名),和public,我的了解,app是存放本地的文件数据,以及后面将要书写的js模块的,而public文件夹中存放的是要提交的数据文件。比如后面会打包好bundle.js 文件,是在这个文件夹目录下。

然后在app中创建两个js文件。一个main.js文件(主要的文件,入口文件),和一个Gretter.js文件(顾名思义。greeter是迎宾员的意思,这就是页面开始的页面开始的一个问候信息。也可以是自己写的模块,引入到main.js中)。再在public中创建一个index.html文件。这个文件也是要上传到浏览器的,因为你要查看你的项目的额显示,这应该就是一个模板了。

greeter.js中,向外暴露出一个方法。使用modele.exports={}的形式。然后就可以在main.js中通过var greeter=require("greet")引入了。

        module.exports={
function(){
var greet=document.createElement("div");
greet.textContext="start a webpack project";
return greet
}
}

在本项目中安装webpack依赖包,后面会讲到,要打包文件的话,需要webpack依赖包进打包文件。所以需要本地安装webpack。然后你会看到你个module_nodles的文件夹出现了。
这个时候你就可以进行打包了。使用webpack /app/main.js /public/bundle.js;就完成了以第一次的简单打包。

3.打包

了解上面说的这种打方式就可以了,但这样打包每次都要输入入口和output的文件地址文件名。很麻烦而且容易出错。所以就需要我们看到的package.json文件和webpack.config.js文件了。

首先讲packages.json,就是一个包依赖的管理文件(我的理解),我们在里面进行配置,就可以进行相应的打包方法了。(还有一点,我们在github上下载项目是。项目中是不会有module_nodles文件夹的,因为里面东西太多了,太大了。这时候我们就需要package.json了,直接命令行npm install就可以逐条安装配置文件package.json 中的那些依赖项了。)

在script项中。添加start:"webpack";依赖会自动根据你的webpack全局环境生成;这样我们就直接可以输入npm start来进行打包了。不需要输入文件名了。

再说webpack.config.js文件,看过配置文件的。都知道有个entry和output项目,这两个就是打包的入口和输出文件。具体的书写格式,理解加记忆:

module.exports={
entry:__diename+"./app/main.js",
output:{
path:__dirname+"./public",
filename:"bundle.js"
}
}

这样就配置好了入口和出口的文件及地址。现在就可以直接使用命令:webpack进行打包了。

4.调试配置

我自己还没有试验调试配置,据我学习了解,调试配置是为了在打包过程中,出现错误后,生成一个debug的文件,让我们很清晰地了解出现的错误。

5.服务器创建

当我们的文件打包好了,需要在服务器上运行起来。因为在服务器上运行起来,能模拟真实的环境。避免再项目上线后出现问题。一些公司都是有自己的测试服务器的。直接把地址配置成你的测试服务器,就可以直接查看运行结果了。

webpack服务器,需要本地安装,npm install –save-dev webpack-dev-server就可以安装成功。这样你就可以在webpack.config.js中进行配置了。我看到别人是这样的:

`"dev-server":"dev-server local.xxxx.cc  --port:3333"`;

这样完成配置,在命令行中,直接npm run dev-server,既可以将服务器跑起来,你的项目就可以运行在服务器上了。

创建完成服务器之后,要在webpack的配置文件中进行配置,

   dev-server:{
contentBase:"./publid" //需要加载的文件
color:true, // 命令行中输出的信息颜色
tistoryFallback:true //是否跳转
inline:true //是否实时更新。
}

6.接下来就是loader了

关于loader,首先你知道这是非常强大的,你可以将其理解为解译模块,因为他也是在module中进行配置的。比如页面使用的额sass.less.ES6语法还有react的JSX语法等等,在现在的浏览器环境下是不能解析的,所以需要进行解译。那就需要这些模块来完成响应的功能。

记住,loader需要本地安装,比图style-loader css-loader等等,都需要npm install的方式安装。然后再配置文件中进行配置。方法自己看别人的配置文件就能明白了。

loader的配置是在moudle中,在webpack.config.js中添加module,loader是以数组的形式存在的:

module:{
loaders:[
test:/\.json$/,
loader:"json",
]
}

其中test是正则验证,文件后缀为.json的文件。loader是loader的名称,这里是jsonloader。


更多的关于loader,自己查看配置文件结合自己需求npm install –save-dev loader名 安装。可以安装常用的style-loader 和 css-loader.

  • 补充:

    • 需要插件自行安装,查看教程,是webpack自带插件还是需要安装,需要安装的需要在webpack.config.js中进行引用,然后进行配置。

    • webpack自身的插件只需要进行配置就可以。具体配置过程避免出错,找一个配置好的文件对比查看。

    • 对了,写这个做笔记也是为了练习下markdown语法:

    语法挺简单的,很容易学,你看到之后也可以学习一下

    对于写文档真的很好用。

    再练习下表格吧,也很简单:

    markdown webpack start
    2.0 dev-server npm start
    区块> 区段 列表+、-、*
    加粗强调** ** 斜体*开发* 分隔———-
    标题## 标题### 按照#号个数依次增至h6标题