摘要：学习心得出于对的好奇，决定要去学习门技术，提升自己。安装命令行输入回车，全局安装命令行输入回车输出版本号，表示安装成功。进入到我们的项目中，我创建的项目为，在这个项目下创建配置项，命令行输入一路回车。
webpack学习心得
出于对webpack的好奇，决定要去学习门技术，提升自己。什么是webpack？
webpack是德国开发者开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如js(含jsx)，coffee，样式（含less、sass），图片等都作为模块来使用和处理。因此，webpack当中js可以引用css,css中可以嵌入图片dataUrl。为什么要用webpack？
webpack是前端一个工具，可以让各种模块进行加载，预处理，再进行打包，它能有gunt或gulp所有基本功能，优点如下：
1.支持commonjs和AMD模块。
2.支持很多模块加载器的调用，可以使模块灵活定制
3.可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能
安装node.js
选择对应版本先下载一个node.js安装包。
下载完成后双击即可。 命令行输入node -v，回车输出nodejs版本号，表示安装成功。 命令行输入npm -v,回车输出npm版本号，表示安装成功(nodejs集成了npm)。 由于npm不稳定，下载速度慢，建议使用淘宝镜像： `npm install -g cnpm --registry=https://registry.npm.taobao.org`, 命令行输入cnpm -v，回车输出cnpm版本号，表示安装成功。以后安装就使用cnpm命令。安装webpack
1.命令行输入 `sudo cnpm install webpack -g`回车，全局安装webpack,命令行输入`webpack -v`回车,输出webpack版本号，表示安装成功。(mac系统下需要输入sudo提高权限，否则报错)。 2.cd进入到我们的项目中，我创建的项目为**********/webpack，在这个项目下创建配置项，命令行输入 `cnpm init`,一路回车。 这时我们的项目会多出一个package.json的文件
接下来，在项目下创建webpack的依赖项，命令行输入`cnpm install webpack --save-dev`。 再来看我们的项目多出一个node_modules文件且package.json多出一行文字
到这里，准备工作已经完成，我们可以使用webpack了。开始webpack之旅
1.小试牛刀
开始之前，我们构建一下项目结构，如图：
main.js作为一个入口文件，用work.js来编写各种行为特效。 main.js中使用require来加载work.js。
在页面中写入一段话。
命令行输入`webpack app/main.js publice/dist/webpack.js`,回车。 意思是将根目录下的app/入口文件main.js生成新的js文件，把新生成的js放到对应路径下，命名为webpack.js 再看我们的项目，多出一个dist文件夹和一个webpack.js文件。
在index.html中引入webpack.js，执行看看效果。
OK,小试牛刀成功。
2.webpack之文件路径
上面小试牛刀，我们需要输入文件路径，当我们项目复杂了，写文件路径也很费劲，下面我们来解决这个问题。 - 创建webpack.config.js 在项目根目录下创建一个文件叫webpack.config.js（必须是这个名字）,创建配置项
现在在命令行直接执行webpack就可以了。webpack之loaders
1.loaders是干什么的？
loaders是webpack中最核心的功能。通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析json文件并把它转换成javascript文件，或者说把下一代的js文件（ES6,ES7）转换为现代浏览器可以识别的js文件。
2.loaders配置项
loaders需要多带带安装并且需要webpack.config.js下的modules关键字下进行配置，loaders的配置选项包括以下几方面： 1)test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须） 2)loader:loader的名称（必须） 3)include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选） 4)query:为loaders提供额外的设置选项（可选）
3.如何使用loaders
loaders之json-loader使用
命令行输入cnpm install --save-dev json-loader安装json-loader,
在webpack.config.js创建module
OK,配置项已经写完了。
接下来创建json文件，随便写点内容，在工作文件work.js引入
命令行输入`webpack`，运行webpack。
json-loader成功！
loaders之css-loader和style-loader
webpack提供两个工具处理样式表，css-loader和style-loader
css-loader使你能够使用类似@import和url(...)的方法实现require()的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。
命令行输入cnpm install --save-dev style-loader css-loader，安装style-loader和css-loader
配置项写法：
module: {
loaders: [
{
test: "/.css$/",
loader: "style!css"
}
]
}
新建一个css文件并在入口文件main.js引入，执行webpack，看下效果
奇怪了，报错，看了半天。
将配置项换种写法
rules:[{
test:/.css$/,
use: ["style-loader", "css-loader"],
}]
执行webpack，看下效果
OK,css引进去了。
lodaer之postcss-loader，autoprefixer
考虑到兼容性问题，为css添加前缀,我们就使用postcss-loader，autoprefixer。
命令行输入cnpm install --save-dev postcss-loader autoprefixer,
配置项：
在webpack.config.js同级目录下新建postcss.config.js
执行webpack，去浏览器审查元素
前缀添加成功！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112099.html
摘要：学习心得出于对的好奇，决定要去学习门技术，提升自己。安装命令行输入回车，全局安装命令行输入回车输出版本号，表示安装成功。进入到我们的项目中，我创建的项目为，在这个项目下创建配置项，命令行输入一路回车。 webpack学习心得 出于对webpack的好奇，决定要去学习门技术，提升自己。 什么是webpack？ webpack是德国开发者开发的模块加载器兼打包工具，在webpack中，...
摘要：构建的基于的多页应用脚手架，本文聊聊本次项目中构建多页应用的一些心得体会。仓库构建的旧版多页应用构建的多页应用。例如多页应用中每个的值对应的文件。Webpack构建的基于zepto的多页应用脚手架，本文聊聊本次项目中Webpack构建多页应用的一些心得体会。 1.前言 由于公司旧版的脚手架是基于Gulp构建的zepto多页应用（有兴趣可以看看web-mobile-cli），有着不少的痛点。例...
摘要：初学，利用进行工程化开发管理，遇到一些问题，如多页面处理，跨域代理的设置，如何同时引入使用。这个命令生成的文件可以放到后端服务器指定的静态文件目录下，这些就是用来上线的文件。这两个文件夹下的代码文件就是为两个独立的页面准备的。 初学react，利用webpack进行工程化开发管理，遇到一些问题，如多页面处理，跨域代理的设置，如何同时引入使用jQuery。第一次试水，简单写了一个表格组件...
摘要：熟悉了之后，各种新旧项目，大小项目都能用耍的飞起。使用作为文件中的模板安装，记住不是，也不用配置，只需在标签中指定，就可以愉快的使用语法了，比起看起来简洁多了。 webpack做文件合并 使用构建工具非常常用一个功能就是合并js和css文件，gulp和grunt都是编写相应的任务来完成，转到webpack突然懵逼了，简单的项目怎么做文件合并呢？其实只需把多个js文件同时引入到main....
阅读 2576·2021-11-25 09:43
阅读 1847·2021-09-22 15:26
阅读 3694·2019-08-30 15:56
阅读 1700·2019-08-30 15:55
阅读 1887·2019-08-30 15:54
阅读 804·2019-08-30 15:52
阅读 3133·2019-08-29 16:23
阅读 886·2019-08-29 12:43
