详解Web使用webpack构建前端项目-创新互联
好久没写技术博客了, 原因在于最近在学习前端方面的技术, 熟悉我的同学都知道, 之前我有使用Vue搭建了一个个人简历, 体验了一把最新的前端技术, 但之前我们使用的是vue-cli脚手架工具, 对于如何自己实现前端构建工具, 当下最为流行的就是webpack和gulp了, 之前一篇我们讲了gulp, 这一篇我们来好好讨论webpack.
10年积累的网站制作、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有娄烦免费网站建设让你可以放心的选择与我们合作。说起webpack, 想必做前端的同学肯定不会陌生, 其实之前我们使用gulp构建的时候, 也使用了webpack的打包技术, 其实gulp和webpack并不是相互替代的关系, 而是相辅相成, 今天我们就来好好看看webpack的神奇之处吧.
我们学习一样新技术, 首先肯定是从他的官方文档入手, 当然我们要学习也是学最新版的.webpack的官方教程写的非常好, 一步一步讲的很到位, 各位同学可以直接阅读官方文档, 比起博客中的二手, 三手以及四手的资料, 官方文档肯定是你更好的选择.
这篇文章, 不是教你什么看这一篇就够了之类的对于官方文档拷贝的水文, 而是能让你快速上手并且觉得所谓的webpack其实也就这么一回事, webpack你只要记住一个中心思想, 就和上面的图示一样, 将所有错综复杂的文件逻辑打包压缩成几个静态资源, 不多说了, 我们还是看代码来的实际.
webpack.config.js
对于一些抛弃jquery迎接react和vue的前端开发者来说, webpack虽然可能自己没有写过, 但看总是看过的吧, 一般来说, 都会有一个webpack.config.js
的webpack配置文件.下面的代码就是一个简单的webpack的配置, 麻雀虽小五脏俱全.
var debug = process.env.NODE_ENV !== "production"; //是否是测试环境 var webpack = require('webpack'); //导入webpack包 var path = require('path'); module.exports = { //导出 webpack固定写法 context: path.join(__dirname), devtool: debug ? "inline-sourcemap" : null, //是否使用map工具, 用于浏览器debug entry: "./src/js/root.js", //打包的实体 module: { loaders: [ //加载的配置 { test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: ['react', 'es2015'], //添加预处理器 plugins: ['react-html-attrs'], //添加组件的插件配置 } }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.less$/, loader: "style!css!less" } ] }, output: { //输出的路径及文件名 path: __dirname, filename: "./src/bundle.js" }, plugins: debug ? [] : [ //一些插件 new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], };
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页名称:详解Web使用webpack构建前端项目-创新互联
文章源于:http://scyanting.com/article/esdjj.html