webpack学习心得出于对webpack的好奇心，决定学习技术，提升自己。什么是网页包？webpack是德国开发者开发的模块加载器和打包工具。在webpack中，它可以将各种资源，如js（包括jsx）、coffee、styles（包括less、sass）、图片等作为模块来使用和处理。所以webpack中的js可以引用css，css中可以嵌入图片dataUrl。为什么要使用webpack？webpack是一个前端工具，可以加载各种模块，预处理，然后打包。它可以具有gunt或gulp的所有基本功能。优点如下：1.支持commonjs和AMD模块。2.支持多种模块加载器调用，可以使模块灵活定制3.可以通过配置打包成多个文件，有效利用浏览器的缓存功能提高性能安装node.js选择对应的版本，下载一个节点。先安装js包。下载完成后，双击它。在命令行输入node-v，回车输出nodejs的版本号，说明安装成功。在命令行输入npm-v，回车输出npm版本号，说明安装成功（nodejs集成了npm）。由于npm不稳定，下载速度较慢，推荐使用淘宝镜像：`npminstall-gcnpm--registry=https://registry.npm.taobao.org`，在命令中输入cnpm-v行，回车输出cnpm版本号，说明安装成功。安装后使用cnpm命令。安装webpack1。在命令行输入`sudocnpminstallwebpack-g`回车全局安装webpack，在命令行输入`webpack-v`回车，输出webpack版本号，说明安装成功。（mac系统下需要输入sudo增加权限，否则会报错）。2.cd进入我们的项目，我创建的项目是*********/webpack，在这个项目下创建一个配置项，在命令行输入`cnpminit`，一路回车。这时候我们的项目就会多出一个package.json文件。接下来在项目下创建webpack依赖，在命令行输入`cnpminstallwebpack--save-dev`。让我们看看我们的项目，其中包含一个node_modules文件和package.json中的一行文本。准备工作已经完成，我们可以使用webpack了。开启webpack之旅1.在开始之前，我们先搭建一下项目结构，如图：main.js作为入口文件，work.js用来编写各种行为效果。Main.js使用require加载work.js。在页面上写一段。在命令行输入`webpackapp/main.jspublic/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的loaders1.loaders是干什么的？加载器是webpack的核心功能。通过使用不同的加载器，webpack可以通过调用外部脚本或工具来处理各种格式的文件，例如分析json文件并将其转换为javascript文件，或者将下一代js文件（ES6、ES7）转换为现代浏览器可以处理的js文件认出。2、loaders配置项loaders需要单独安装，需要在webpack.config.js下的modules关键字下配置。loader的配置选项包括以下几个方面：1）test：一个正则模式，匹配loaders处理的文件的扩展名Expression（必填）2）loader：loader的名称（必填）3）include/exclude：手动添加文件必须处理的（文件夹）或块不需要处理的文件（文件夹）（可选）4）查询：为加载器提供额外的设置选项（可选）3.如何使用加载器加载器的json-loader使用命令一行输入cnpminstall--save-devjson-loader安装json-loader，在webpack.config.js中创建一个模块OK，配置项已经写好了。接下来新建一个json文件，随便写一些内容，在工作文件work.js中将`webpack`导入命令行，运行webpack。json-loader成功了！加载器的css-loader和style-loaderwebpack提供了两个处理样式表的工具，css-loader和style-loadercss-loader可以让你使用@import和url(...)等方法来实现require(),style-loader将所有计算出的样式添加到页面中。两者的结合可以让你将样式表嵌入到webpack打包的js文件中。在命令行输入cnpminstall--save-devstyle-loadercss-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。在命令行输入cnpminstall--save-devpostcss-loaderautoprefixer，配置项：在webpack.config.js同级目录新建postcss.config.js执行webpack，到浏览器查看添加元素前缀成功！
