前端工程化——Webpack入门使用
脚本宝典收集整理的这篇文章主要介绍了前端工程化——Webpack入门使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
前言
是构建工具，还是打包工具？
webpack是一个模块加载器兼打包工具，它能够让你非常清晰的把编写模块化的代码，什么编译都交给webpack就好了，当它也能实现简单的打包，比如合并js，压缩等。
下面我们简单说下webpack和gulp的区别，好加深下webpack的理解。
本质上来说，gulp是通过一系列的插件实现了原本复杂繁琐的任务自动化，比如拷贝啊，替换文件啥的，是一个纯粹的工具。它并不能将你的css，图片等非js资源模块化。但是webpack可以做到将非js资源模块化，比如图片等。
总的来说，gulp是一个自动化任务的工具，所以在项目的开发中，你也可以采用 gulp + webpack 组合大招更好的提升项目效率。
Webpack的入门使用
说那么多概念还不如写个小demo来的实在，相比各位看官也是这么想得。
其实，我们记住webpack的核心功能是将静态资源模块化，js，css，图片啊等等，都能通过require的方式进行加载。当然你也可以利用ES6语法imPRot来引入，这个后面说。
下面我们开始进行咱们的项目吧。
1.首先创建一个空目录，执行命令进行初始化
@H_126_65@ > npm init
这样，咱们就有package.json了，下面我们先把文件目录搭建一下哈。
目录结构如下：
好。文件我们建完了，该干活写代码了。
第一个是 index.htML 首页，这里我们的很简单外部只是引入了一个 bundle.js，相信大家现在也找不到这个bundle.js，因为这个文件是后面webpack编译打包生成的。他会将style.css，index.js打包成一个js，这样能加快浏览器的加载效率。
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
<div>Hello,world</div>
<img src="./demo.png" alt="">
<script src="../dist/bundle.js"></script>
</body>
</html>
再看看 style.css，很简单，就一句话。
// style.css
body{
background:red;
}
再下一下步，我们看看 index.js，它也很简单，而且它的目的是webpack的入口文件，webpack打包就是通过入口文件将里面require的资源一个个加载编译打包。你可以把index.js看成一个向导，指引着webpack去寻找那些需要被解救编译打包的文件。
//index.js
require('./style.css');
The Next,我们看看编写 webpack.config.js ，特别声明，这个文件是webpack的默认配置，一般你没啥需求也别改它的名字了，但是你要修改的话，自己百度去吧。
修改webpack配置文件命令如下：
> webpack --config XXX.js
具体webpack.config.js配置如下：
// webpack.config.js
VAR path = require('path')
var webpack = require('webpack');
module.exports = {
entry: ['./src/index'], // 指定编译打包入口文件
output: { // 编译完了，输出到这个目录，这个文件名
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [ // 这个是插件配置噢
new webpack.optimize.UglifyJsPlugin({
comPressor: {
warnings: false,
},
})
],
module: { // 这个是引入的模块，可以用来做一些其他的事儿
loaders: [{ //比如这个loaders模块，可以给每种类型文件指定加载器
test: /.css$/,
loaders: ['style', 'css']
},
]
}
}
好了，到现在我们的业务代码都写完了，该安装所需的插件了。
这里一下安装了多个插件，可能会比较慢，可以先换成国内的淘宝npm镜像:
> npm --registry https://registry.npm.taobao.org info underscore 安装插件命令如下：
> npm install style-loader css-loader webpack --save
--save 是将依赖写入到package.json里，后面代码给其他人用，直接npm install就能自动安装所有的依赖了。
安装完成后，咱们开始打包！！！
在项目目录执行以下命令：别傻乎乎的把 > 也拷贝进去啊，就是只有一个 webpack！！！
> webpack
执行完上面的webpack命令，会出现以下令人欣喜的画面，啥？没出现？自己上去找找看看哪里步骤漏了。
这里顺便推荐一个好用的windows下面的命令行工具： cmder
然后你再打开你项目目录的 index.html ，直接双击用浏览器打开噢。
就能看的如下画面。相信你的require('./style.css')也就生效了。
写在最后
一个入门级的使用就到这儿了，webpack还有很多黑魔法，本文也只是一个入门使用，后续的我用完再继续跟大家分享一下，对了，还请大神看到有误的地方多多指点哈，提点提点小弟。
如果对你有点点帮助，嘿嘿，回复一下点个赞就是我最大的动力，感激不尽。
参考文献
http://www.cnblogs.com/pqjwyn...
https://github.com/wangning0/...学习之路
![""]("./demo.png")
" title="" data-original-title="复制">
脚本宝典总结
以上是脚本宝典为你收集整理的前端工程化——Webpack入门使用全部内容，希望文章能够帮你解决前端工程化——Webpack入门使用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- vuex 基本入门和使用（二） 2019-08-19
- 默认参数如何在JavaScript ES6中工作 2018-11-14
- JavaScript ES6功能：好的部件 2018-11-14
- 如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
- 如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
- 关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
- 5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
- 分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
- JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
- 什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12