前端模块化工具--webpack学习心得

话说前头

• webpack前段时间有据说一下，如今已经到了3.x的版本，本身没去接触。由于以前使用gulp来做为本身的项目构建工具。如今感受gulp使用的趋势在减小。如今这段时间去接触了webpack，感受很不错，它的模块化打包机制，对前端开发和性能方面都带来好处。这里不是说gulp很差，二者不做比较

• 接下来会说说本身对webpack使用的感觉，我不会一步步写出使用webpack的流程，由于关于webpack的教程有不少，但会写一些关键地方，注意地方，来加深对webpack的看法。

• 学习就是这样，东看看西看看，看人家的对某件东西的看法，加上本身的理解，是否异同，慢慢积累，最终成为本身的知识。

webpack介绍

1.（引用了webpack官网的一句话）：

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成少许的 bundle - 一般只有一个，由浏览器加载。
它是高度可配置的，可是，在开始前你须要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。

2.我的理解：

这里说了这么多就是它能把项目中资源文件当作一个个模块，而后将他们打包成少许或一个文件，而后咱们去引用这文件。

3.疑惑：

你们这里可能会疑惑，当时我也想，怎么能作到这个？怎么就打包成一个文件了？那么js，css，图片什么的怎么搞？还有这种操做？我能怎么办，那只能选择相信它。

4.感觉：

其实学习某同样工具，咱们只须要知道这东西能作什么，而后怎么用它，但它具体实现的细节，有时咱们没必要深究。咱们只需知其然，没必要知其因此然。尽管去用这个东西，它原本就是一个工具。就比如开一辆车，咱们只需去学习怎么开，而不用太在乎他为何能开，开多了同样成为老司机，不是吗，没毛病吧。工具它能给咱们带来便利，就足够了。除非你是制造工具的。可是若是对webpack很是感兴趣，能够去它的github上看看。

webpack能作的事：

上面说webpack能打包模块，其实还有不少功能。

• webpack能够对Js进行转译，当前浏览器不少不支持es6，可是咱们想使用es6的语法，webpack能够将es6语法转成es5语法
• webpack能够对less，sass，stylus等css的预处理语言进行转译
• webpack能够热更新
• webpack能够对图片处理，压缩，转成base64格式。
• webpack能够对代码进行压缩。
• webpack能够进行语法检查，能够生成自动化html模板等等

上面举例是经常使用，其功能还多得多。都是经过webpack 的 loader和plugins实现的，能够说是很强大了。

webpack安装：

1. 前提有nodejs和npm，在网上搜索安装，如今的nodejs都会带有npm，因此直接安装nodejs便可。
2. 经过 cmd（用的是win操做系统）运行：node -v 和 npm -v 若都能返回版本号代表安装成功。
3. 接着正式安装webpack,命令行中运行：

//全局安装
npm install -g webpack
//建立一个文件夹
mkdir webpack-demo
//进入项目中
cd webpack-demo
//初始化，生成默认package.json 文件
npm init -y
//在当前项目中安装webpack
npm install webpack --save-dev
//到这里就安装成功了

感觉：整个流程和安装gulp差很少，是npm模块的那套安装流程。
说到npm，在国内推荐使用cnpm淘宝镜像，很不错，速度快不少。还有能够逛npm的官网去查询本身想要看的模块，里面都有模块的详细介绍。

webpack的关键文件:webpack.config.js

• webpack.config.js是webpack的配置文件，对项目中的webpack进行配置。
• 文件中用到的插件和loader须要先试用npm安装好：
  

// 安装css-loader
npm install css-loader  --save-dev
// 安装htmlWebpackPlugin
npm install html-webpack-plugin --save-dev

• 项目根目录新建简单的webpack.config.js文件：

//引入模块
const webpack = require('webpack'); 
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
//配置
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

• 这个文件中关键的东西就是上述提到的：四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。弄懂这四个核心的东西，webpack也就懂得差很少了，起码懂得怎么用。

• 各大核心的做用：

1. entry： 入口文件，也就是想要被打包的文件，这里能够是一个或者多个。
2. output： 输入文件，表示打包后的文件将会被输出到哪里，能够一个或多个。
3. module：模块，里面的rules是一个数组，存放则项目中须要用到的loader，loader能够对资源文件进行一系列的处理。常见的loader：style-loader，css-loader，less-loader，babel-loader，url-loader等等。
4. plugins：插件，为webpack添加所需的功能，如例子里面的是自动生成html模板插件。
   更多细节在webpack的官网上查看。

最后再说说：

• 本次文章主要说说本身使用webpack时的一些想法和收获，可能写得不是很好，但这是个学习的过程，我很享受。
• 再提提，之前我不怎么喜欢去看一些官方的文档，由于全都是英文，本身英语也不是很好。可是后来硬着头皮看，发如今文档中学到的东西不少，也更有助于理解，有的文档写得很详细，会懂得不少。这过程当中不会的英语单词就去查，顺便就补补英语，其实挺好。经过本身看文档，而后能用，能作，内心美滋滋。