webpack初学内容详细

初学webpack

学习web之前现要知道require引入的相关知识,最好有一点node.js的相关基础

然后你要先下载node,安装git  想要了解webpack的小伙伴应该都有这个node。安装git的基础

这里就不介绍。下面我们开始web初识:

1.在我们的demo的里面打开git


webpack初学内容详细_第1张图片

2.然后我们用那npm安装webpack   

    2.1            npm install -g webpack    //全局安装            比较慢小伙伴们可以cnpm 淘宝镜像功能(这里就不展示了)

    2.2            npm install --save-dev webpack      //安装到项目里面   

为了让愚蠢的学弟们看的懂,我就多截图


webpack初学内容详细_第2张图片
项目结构

3.创建一个page.json的配置文件

     3.1   npm  init    //这个创建

     3.2   后面我们要给他一个名字   然后一路回车

    3.3  我们的配置文件已经创建好了要安装webpack 

           npm install --save-dev webpack    //安装wenpck


webpack初学内容详细_第3张图片
page.json

安装完我们会看到我们的配置page.json里面就配置好了webpack

      3.4然后我们创建2个文件夹一个app文件夹放javascript,里面放min.js和greeter.js

        一个public文件夹放我们的index.html


webpack初学内容详细_第4张图片
我们的项目结构


webpack初学内容详细_第5张图片
greeter写入这个我们基于node的一个框架CommonJS

>打个广告node框架之前试了一下很好用‘koa’的新的框架想了解的小伙伴去百度

      3.5我们在main.js里面引入greeter.js


main.js

        3.6我们在index.html里面写入


webpack初学内容详细_第6张图片
index.html

我们在git命令行输入node_modules/.bin/webpack app/main.js public/exit.js


webpack初学内容详细_第7张图片

我们看到已经对我们的这个js进行了编译并生成了exit.js的文件打开index,html

已经出来了有没有很开心。开心就回复个233


webpack初学内容详细_第8张图片
已经显示出来了

我们看下编译的exit的这个编译好的js文件


webpack初学内容详细_第9张图片
exit.js

我们上面的都不用管,就看下面的这2个  上面的这个是main.js  下面的这个是我们的greeter.js

4.通过文件配置webpack我们来编译

  我们先创建一个webpack.config.js的webpack的配置文件


webpack初学内容详细_第10张图片
webpack.config.js

这样我们就可以直接输入webpack(非全局安装需使用node_modules/.bin/webpack)

就可以直接进行编译(通过我们node.js下面的webpack插件进行的)

5.通过我们的npm 来进行编译

我们在我们的page.json里面


webpack初学内容详细_第11张图片
page.js

新增加这个start的这个  我们就可以直接npm start 就可以直接的进行编译

6.webpack自动刷新显示修改后的结果功能

6.1        npm install --save-dev webpack-dev-server    //安装依赖

6.2     在我们的webpack.config.js里面添加依赖


webpack初学内容详细_第12张图片
webpack.config.js


webpack初学内容详细_第13张图片
page.js

7.编译配置(重要)(sass转换css。ES6转换ES5。。。)Loaders

添加一个json的文件tsconfig.json  在APP文件下


webpack初学内容详细_第14张图片


webpack初学内容详细_第15张图片
greeter文件修改

然后我们安装编译的依赖

然后我们npm run server   (前面加有加过自动刷新的功能)

1.npm install --save-dev style-loader css-loader  // 安装我们的css

2.使用插件Plugins

删除我们的public整个文件夹,之后我们会直接打包出来css文件会直接打包到js里面

在app文件下创建一个index.tmpl.html文件模版


webpack初学内容详细_第16张图片

新建一个名字为helloword的文件夹做为我们的入口文件夹

npm install --save-dev html-webpack-plugin   //使用添加依赖


webpack初学内容详细_第17张图片


webpack初学内容详细_第18张图片


然后我们  运行  npm start     就会发现我们的helloword文件下面就已经生成了我们的js和html

我们运行npm run server 就可以看到我们执行结果了

我们看下编译后的js


webpack初学内容详细_第19张图片

基本上开发环境就可以了  

剩下的周日会更新css 压缩 以及js压缩 小伙伴们可以看下我们的出口文件里面  之后我们会把css也压缩到exit.js  里面

你可能感兴趣的:(webpack初学内容详细)