webpack技术讲解及入门
本文为饥人谷讲师slashhuang原创文章,首发于 前端学习指南。 webpack技术入门webpack基本已经成为前端项目的标配构建工具了。 webpack的出现解决了什么问题JavaScript自面世之后,就成为浏览器的标准脚本语言。 下面,我将按照如下的目录结构对webpack使用进行讲解。 1、webpack概述 1.webpack概述webpack = module building system。 webpack提供了一套API接口,开发者只需要按照它提供的规范照着做就行了。 对于开发者来说,除了需要阅读英语文档能力和nodeJS之外,webpack的学习门槛真的不高。 2.一个简单而通用的webpack配置文件我们以如下的 webpack.config文件来进行分析 var webpack = require("webpack"); var DefinePlugin = require('webpack/lib/DefinePlugin'); module.exports = { context:process.cwd(),watch: true,entry: './index.js',devtool: 'source-map',output: { path: path.resolve(process.cwd(),'dist/'),filename: '[name].js' },resolve: { alias:{ jquery: process.cwd()+'/src/lib/jquery.js',} },plugins: [ new webpack.ProvidePlugin({ $: 'jquery',_: 'underscore',React: 'react' }),new DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('development') } }) ],module: { loaders: [{ test: /.js[x]?$/,exclude: /node_modules/,loader: 'babel-loader' },{ test: /.less$/,loaders:['style-loader','css-loader','less-loader'] },{ test: /.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]" },{ test: /.html/,loader: "html-loader?" + JSON.stringify({minimize: false }) } ] } }; 这个简单的webpack配置文件,基本可以处理大多数的前端业务场景了。 通过配置plugins、module.loaders、entry、output基本可以构建一个兼容本地开发和生产环境的富应用web工程,下面针对以上的配置文件进行分析。 3. webpack的配置文件解读* module.loaders数组 [{ test: /.js[x]?$/,loader: 'babel-loader' }] 比如有个文件require('index.jsx'),webpack会根据文件名是否满足test字段的正则来决定是否使用babel-loader来处理文件。 exclude则是告诉webpack不需要对node_modules目录进行处理
resolve: { alias:{ jquery: path.resolve(process.cwd(),'src/lib/jquery.js')},extensions:['.js','.json'] } resolve对象是在 webpack预编译时,就加载进整个webpack编译的配置中的。
/** 比如有个文件代码中存在process.env对象,则process.env将会被替换成上面的{ 'NODE_ENV': JSON.stringify('development') } console.log(process.env)==>console.log(({"NODE_ENV":'development'})) */ plugins: [new DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('development') } })] 关于这个配置文件,读者如果有疑问,可以直接在评论区留言,我会尽快回复,这里就不赘述了。 4. webpack常用的loaders和plugins关于loader这块呢,webpack官方给出了非常详尽的解决方案,基本不用开发者再去开源社区上寻找。 前端资源loaders列表 1、代码优化之:
2、 依赖注入之:
3、 文件抽取之:
4、 开发体验优化之:
5、 目录/文件拷贝之:
5.webpack总结本篇文章对webpack的讲解主要集中在API层面。 另外,关于更加深入的webpack的编译流程, 我几个月前写过一篇博客webpack编译流程漫谈,可以供大家参考学习。 最后 欢迎大家关注我的知乎和前端学习专栏。 加微信号: astak10或者长按识别下方二维码进入前端技术交流群 ,暗号:写代码啦 每日一题,每周资源推荐,精彩博客推荐,工作、笔试、面试经验交流解答,免费直播课,群友轻分享... ,数不尽的福利免费送
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |