好久没写技术博客了,原因在于最近在学习前端方面的技术,熟悉我的同学都知道,之前我有使用Vue搭建了一个个人简历,体验了一把最新的前端技术,但之前我们使用的是vue-cli脚手架工具,对于如何自己实现前端构建工具,当下最为流行的就是webpack和吞咽了,之前一篇我们讲了一大口,这一篇我们来好好讨论webpack。
说起webpack,想必做前端的同学肯定不会陌生,其实之前我们使用吞咽构建的时候,也使用了webpack的打包技术,其实杯和webpack并不是相互替代的关系,而是相辅相成,今天我们就来好好看看webpack的神奇之处吧。
我们学习一样新技术,首先肯定是从他的官方文档入手,当然我们要学习也是学最新版的。webpack的官方教程写的非常好,一步一步讲的很到位,各位同学可以直接阅读官方文档,比起博客中的二手,三手以及四手的资料,官方文档肯定是你更好的选择。
这篇文章,不是教你什么看这一篇就够了之类的对于官方文档拷贝的水文,而是能让你快速上手并且觉得所谓的webpack其实也就这么一回事,webpack你只要记住一个中心思想,就和上面的图示一样,将所有错综复杂的文件逻辑打包压缩成几个静态资源,不多说了,我们还是看代码来的实际。
<强> webpack.config.js
对于一些抛弃jquery迎接反应和vue的前端开发者来说,webpack虽然可能自己没有写过,但看总是看过的吧,一般来说,都会有一个<代码> webpack.config.js>
var=process.env调试。NODE_ENV !==吧?//是否是测试环境
var webpack=要求(“webpack”);//导入webpack包
var=路径要求(“路径”);
模块。={//导出口出webpack固定写法
背景:path.join (__dirname),
devtool:调试& # 63;“inline-sourcemap”: null,//是否使用地图工具,用于浏览器调试
条目:“。/src/js/根。js ",//打包的实体
模块:{
加载器:[//加载的配置
{
测试:/\ . js # 63;美元/,
排除://(node_modules),
装载机:“babel-loader”,
查询:{
预设:“反应”、“es2015”,//添加预处理器
插件:[' react-html-attrs ']//添加组件的插件配置
}
},
{测试:/\。css/美元,装载机:“style-loader !css-loader},
{
测试:/\ .less/美元,
少装载机:“css样式! !”
}
]
},
输出:{//输出的路径及文件名
路径:__dirname,
文件名:“。/src/bundle.js”
},
插件:调试& # 63;[]:[//一些插件
新webpack.optimize.DedupePlugin (),
新webpack.optimize.OccurenceOrderPlugin (),
新的webpack.optimize。UglifyJsPlugin({损坏:假的,sourcemap:假}),
),
};
之前
webpack主要包括<代码>条目,模块,输出插件代码四大类,官方文档说的已经很清楚了,想要进一步的学习,请翻阅官方文档,如果不想折腾直接拷贝上述代码即可。
相较吞咽,webpack在打包方面更为精简,这也是流行的原因吧,但光看上面的文件,的确也是简单,但是还有进一步改善的空间。
<强> package.json
对于npm的介绍我就不多说了,我们直接来看文件。
{
“名称”:“webpack”,
“版本”:“1.0.0”,
“描述”:“”,
“主要”:“index.js”,
“脚本”:{//命令行工具
“测试”:“echo \”的错误:没有测试指定\”,,退出1”,
“看”:“webpack——发展——看”,
“开始”:“webpack-dev-server——打开——配置webpack.dev.js”,
“构建”:“webpack——配置webpack.prod.js”
},
“关键词”:[],
“作者”:“”,
“许可证”:“ISC”,
“devDependencies”:{//开发环境依赖
:“babel-loader ^ 7.1.2”,
:“clean-webpack-plugin ^ 0.1.16”,
:“css-loader ^ 0.28.7”,
:“csv-loader ^ 2.1.1”,
:“file-loader ^ 0.11.2”,
:“html-webpack-plugin ^ 2.30.1”,
:“json-loader ^ 0.5.7”,
:“lodash ^ 4.17.4”,
:“style-loader ^ 0.18.2”,
:“uglifyjs-webpack-plugin ^ 0.4.6”,
:“webpack ^ 3.6.0”,
:“webpack-dev-middleware ^ 1.12.0”,
:“webpack-dev-server ^ 2.8.2”,
:“webpack-merge ^ 4.1.0”,
:“xml-loader ^ 1.2.1”
},
“依赖”:{//生产环境依赖
:“babel-plugin-import ^ 1.5.0”,
:“babel-plugin-react-html-attrs ^ 2.0.0”,
:“babel-preset-es2015 ^ 6.24.1”,
:“babel-preset-react ^ 6.24.1”,
:“babelify ^ 7.3.0”,
“反应”:“^ 15.6.1”,
:“react-dom ^ 15.6.1”,
:“react-mixin ^ 4.0.0”,
:“react-router ^ 4.2.0”
}
}
