webpack中文文档

前言： vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面 。vue-cli是基于node环境利用webpack对文件进行编译、打包、压缩、es6转es5等一系列操作。目前vue-cli已经升级到了3.0版本，3.0所需的webpack版本是4.xxx，2.0版本目前也很流行,2.0所需的webpack版本是3.xxx，我们来讲讲两者的配置： Vue2.0： 　　 　一.安装node.js环境: 　　　　去node官网下载node.js并安装(http://nodejs.cn/download/)。安装完成后可以在终端执行 node -v查看node 是否安装成功，下图是安装成功的提示，显示出当前安装的node的版本号。 　　　 　 　　二.全局安装webpack： 　　　　为了在其他任何目录下都能使用到webpack，进行全局安装，执行npm install webpack@3.12.0 -g 命令，npm 是Node集成的工具 npm install 是从github上下载webpack最新的包，“@3.12.0”表示安装指定的版本，因为现在已经升级到了4.0版本，如果不指定版本版本号就会安装最新的版本，同时vue-cli2需要的是3.xxx的版本

搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页，点击下图中框出位置，进行下载即可，当前版本为8.9.4，下载网址为： https://nodejs.org/zh-cn/download/ 2.至于什么是LTS，请参考该知乎问题： https://www.zhihu.com/question/35512237 ，总之LTS意味着更加稳定，因此此处选择安装该版本，具体请依照自身需求。 安装 1.安装十分简单，只需双击刚下载完成的node-v8.9.4-x64.msi文件，期间可以更换安装路径，其余只需点击下一步直至安装完成即可， 2.如下图所示，则表示安装成功。 测试 1.安装完成则自动安装好了npm这个包，并且自动将路径配置到系统路径中，使用windows+R快捷键，输入cmd，即打开命令提示符窗口，通过如下命令查看是否安装成功； node -v --查看当前node版本npm -v --查看当前npm版本 2.得到如下图所示，则表示安装成功。 安装cnpm 1.由于使用npm工具会自动去查找国外的网站下载包，可能会被防火墙屏蔽导致下载失败，因此我们需要安装cnmp淘宝镜像来代替npm，使用cnpm下载包会大大提高下载速率； 2.安装方式，在命令提示符窗口，输入如下命令，等待1至2分钟即可 npm install cnpm -g --安装cnpm，-g代表全局

webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。 通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。 clean-webpack-plugin 是一个比较普及的管理插件，安装方法如下： npm install clean-webpack-plugin --save-dev 然后在webpack.config.js文件中配置一下，方法如下： 1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 + const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 5 module.exports = { 6 entry: { 7 app: './src/index.js', 8 print: './src/print.js' 9 }, 10 plugins: [ 11 + new CleanWebpackPlugin(['dist']), 12 new HtmlWebpackPlugin({ 13 title: 'Output Management' 14 }) 15 ],

文章转载自: http://www.pythonheidong.com/blog/article/3054/ 常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程 编程类中文书籍索引 深入理解JS系列 前端开发仓库 《JavaScript 闯关记》 JavaScript 初学者教程（指南） JS讲义 李炎恢JavaScript教程 第一季 逐行分析jQuery源码的奥秘 JS常用框架、库、插件 [vue] vue官网 [vue] 饿了么element UI [vue] vue-router路由 [vue] vuex状态管理 [vue] mint-ui移动端UI组件 [vue] VUX [vue] vue相关UI组件收集 [vue] Ant Design of Vue (UI组件) 报表UI组件viser-vue axios请求 ajax：Fetch jQuery中文文档 webpack中文文档 深入浅出 Webpack zeptojs中文版 bootstrap官网 echarts 微信组件weui weui github官网实例 推荐团队与博客 w3cplus w3school 前端观察 汤姆大叔博客 腾讯Web前端 Alloy 团队 Blog 张鑫旭博客 牧云云博客 qq前端月报 JS基础与技能 JS设计模式 腾讯全端 AlloyTeam

基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境. 项目名webpackDemo； 上一节讲到loaders: https://blog.csdn.net/fengsh998/article/details/88170903 因为现在前端开发很多时候都不只是写裸裸的css了。有一类人，觉得css的样式太个单纯，没有活力，没有气息。于是呼，程序员嘛，终归要整个成就感。这种白纸黑字的玩意，太简单不费脑。只是量的问题，不停的堆就可以了。这就是css,不考考虑重用性，继承性，冗余性。所以大神来了。硬生生的给css造了个心藏。less和sass非要把css当成了有生命的程序来写。我想也就这样吧。我吹牛的，也不知道是不是这样。不管啦。反正不进则退。不搞到别人维护不了，自己就掉饭碗。 关于less和sass的区别这时有一篇，可以了解下: https://www.cnblogs.com/hope666/p/6791790.html less的中文文档： https://less.bootcss.com sass的中文文档： https://www.sass.hk/docs/ less-loader : https://www.webpackjs.com/loaders/less-loader/ sass-loader: https:/