优秀网站建设设计,wordpress html5 mp3,手机建站图片,合肥网站建设zgkr话说前头
webpack前段时间有听说一下#xff0c;现在已经到了3.x的版本#xff0c;自己没去接触。因为之前使用gulp来作为自己的项目构建工具。现在感觉gulp使用的趋势在减少。现在这段时间去接触了webpack#xff0c;感觉很不错#xff0c;它的模块化打包机制#xff0c…话说前头
webpack前段时间有听说一下现在已经到了3.x的版本自己没去接触。因为之前使用gulp来作为自己的项目构建工具。现在感觉gulp使用的趋势在减少。现在这段时间去接触了webpack感觉很不错它的模块化打包机制对前端开发和性能方面都带来好处。这里不是说gulp不好两者不作比较接下来会说说自己对webpack使用的感受我不会一步步写出使用webpack的流程因为关于webpack的教程有很多但会写一些关键地方注意地方来加深对webpack的见解。学习就是这样东看看西看看看人家的对某件东西的见解加上自己的理解是否异同慢慢积累最终成为自己的知识。
webpack介绍
1.引用了webpack官网的一句话 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时它会递归地构建一个依赖关系图(dependency graph)其中包含应用程序需要的每个模块然后将所有这些模块打包成少量的 bundle - 通常只有一个由浏览器加载。它是高度可配置的但是在开始前你需要先理解四个核心概念入口(entry)、输出(output)、loader、插件(plugins)。 2.个人理解
这里说了这么多就是它能把项目中资源文件看成一个个模块然后将他们打包成少量或一个文件然后我们去引用这文件。
3.疑惑
大家这里可能会疑惑当时我也想怎么能做到这个怎么就打包成一个文件了那么jscss图片什么的怎么搞还有这种操作我能怎么办那只能选择相信它。
4.感受
其实学习某一样工具我们只需要知道这东西能做什么然后怎么用它但它具体实现的细节有时我们不必深究。我们只需知其然不必知其所以然。尽管去用这个东西它本来就是一个工具。就好比开一辆车我们只需去学习怎么开而不用太在意他为什么能开开多了一样成为老司机不是吗没毛病吧。工具它能给我们带来便利就足够了。除非你是制造工具的。但是如果对webpack非常感兴趣可以去它的github上看看。
webpack能做的事
上面说webpack能打包模块其实还有很多功能。
webpack可以对Js进行转译当前浏览器很多不支持es6但是我们想使用es6的语法webpack可以将es6语法转成es5语法webpack可以对lesssassstylus等css的预处理语言进行转译webpack可以热更新webpack可以对图片处理压缩转成base64格式。webpack可以对代码进行压缩。webpack可以进行语法检查可以生成自动化html模板等等
上面举例是常用其功能还多得多。都是通过webpack 的 loader和plugins实现的可以说是很强大了。
webpack安装
前提有nodejs和npm在网上搜索安装现在的nodejs都会带有npm所以直接安装nodejs即可。通过 cmd用的是win操作系统运行node -v 和 npm -v 若都能返回版本号表明安装成功。接着正式安装webpack,命令行中运行//全局安装npm install -g webpack//创建一个文件夹mkdir webpack-demo//进入项目中cd webpack-demo//初始化生成默认package.json 文件npm init -y//在当前项目中安装webpacknpm install webpack --save-dev//到这里就安装成功了 感受整个流程和安装gulp差不多是npm模块的那套安装流程。说到npm在国内推荐使用cnpm淘宝镜像很不错速度快很多。还有可以逛npm的官网去查询自己想要看的模块里面都有模块的详细介绍。
webpack的关键文件:webpack.config.js
webpack.config.js是webpack的配置文件对项目中的webpack进行配置。文件中用到的插件和loader需要先试用npm安装好// 安装css-loader
npm install css-loader --save-dev// 安装htmlWebpackPlugin
npm install html-webpack-plugin --save-dev项目根目录新建简单的webpack.config.js文件//引入模块const webpack require(webpack);
const path require(path);const htmlWebpackPlugin require(html-webpack-plugin);//配置const config {entry: ./path/to/my/entry/file.js,output: {
path: path.resolve(__dirname, dist),
filename: my-first-webpack.bundle.js}, module: {
rules: [{ test: /\.css$/, use: css-loader }
]},plugins: [new HtmlWebpackPlugin({template: ./src/index.html})]
};这个文件中关键的东西就是上述提到的四个核心概念入口(entry)、输出(output)、loader、插件(plugins)。弄懂这四个核心的东西webpack也就懂得差不多了起码懂得怎么用。各大核心的作用
entry 入口文件也就是想要被打包的文件这里可以是一个或者多个。output 输入文件表示打包后的文件将会被输出到哪里可以一个或多个。module模块里面的rules是一个数组存放则项目中需要用到的loaderloader可以对资源文件进行一系列的处理。常见的loaderstyle-loadercss-loaderless-loaderbabel-loaderurl-loader等等。plugins插件为webpack添加所需的功能如例子里面的是自动生成html模板插件。更多细节在webpack的官网上查看。
最后再说说
本次文章主要说说自己使用webpack时的一些想法和收获可能写得不是很好但这是个学习的过程我很享受。再提提以前我不怎么喜欢去看一些官方的文档因为全都是英文自己英语也不是很好。但是后来硬着头皮看发现在文档中学到的东西很多也更有助于理解有的文档写得很详细会懂得很多。这过程中不会的英语单词就去查顺便就补补英语其实挺好。通过自己看文档然后能用能做心里美滋滋。
原文地址http://www.cnblogs.com/Ry-yuan/p/7220494.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注
