初学webpack
学习web之前现要知道require引入的相关知识，最好有一点node.js的相关基础
然后你要先下载node，安装git 想要了解webpack的小伙伴应该都有这个node。安装git的基础
这里就不介绍。下面我们开始web初识：
1.在我们的demo的里面打开git
2.然后我们用那npm安装webpack
2.1 npm install -g webpack //全局安装 比较慢小伙伴们可以cnpm 淘宝镜像功能（这里就不展示了）
2.2 npm install --save-dev webpack //安装到项目里面
为了让愚蠢的学弟们看的懂，我就多截图
项目结构
3.创建一个page.json的配置文件
3.1 npm init //这个创建
3.2 后面我们要给他一个名字 然后一路回车
3.3 我们的配置文件已经创建好了要安装webpack
npm install --save-dev webpack //安装wenpck
page.json
安装完我们会看到我们的配置page.json里面就配置好了webpack
3.4然后我们创建2个文件夹一个app文件夹放javascript,里面放min.js和greeter.js
一个public文件夹放我们的index.html
我们的项目结构
greeter写入这个我们基于node的一个框架CommonJS
>打个广告node框架之前试了一下很好用‘koa’的新的框架想了解的小伙伴去百度
3.5我们在main.js里面引入greeter.js
main.js
3.6我们在index.html里面写入
index.html
我们在git命令行输入node_modules/.bin/webpack app/main.js public/exit.js
我们看到已经对我们的这个js进行了编译并生成了exit.js的文件打开index,html
已经出来了有没有很开心。开心就回复个233
已经显示出来了
我们看下编译的exit的这个编译好的js文件
exit.js
我们上面的都不用管，就看下面的这2个 上面的这个是main.js 下面的这个是我们的greeter.js
4.通过文件配置webpack我们来编译
我们先创建一个webpack.config.js的webpack的配置文件
webpack.config.js
这样我们就可以直接输入webpack(非全局安装需使用node_modules/.bin/webpack)
就可以直接进行编译（通过我们node.js下面的webpack插件进行的）
5.通过我们的npm 来进行编译
我们在我们的page.json里面
page.js
新增加这个start的这个 我们就可以直接npm start 就可以直接的进行编译
6.webpack自动刷新显示修改后的结果功能
6.1 npm install --save-dev webpack-dev-server //安装依赖
6.2 在我们的webpack.config.js里面添加依赖
webpack.config.js
page.js
7.编译配置（重要）（sass转换css。ES6转换ES5。。。）Loaders
添加一个json的文件tsconfig.json 在APP文件下
greeter文件修改
然后我们安装编译的依赖
然后我们npm run server （前面加有加过自动刷新的功能）
1.npm install --save-dev style-loader css-loader // 安装我们的css
2.使用插件Plugins
删除我们的public整个文件夹，之后我们会直接打包出来css文件会直接打包到js里面
在app文件下创建一个index.tmpl.html文件模版
新建一个名字为helloword的文件夹做为我们的入口文件夹
npm install --save-dev html-webpack-plugin //使用添加依赖
然后我们 运行 npm start 就会发现我们的helloword文件下面就已经生成了我们的js和html
我们运行npm run server 就可以看到我们执行结果了
我们看下编译后的js
基本上开发环境就可以了
剩下的周日会更新css 压缩 以及js压缩 小伙伴们可以看下我们的出口文件里面 之后我们会把css也压缩到exit.js 里面
网友评论