webpack修炼之路--初识webpack

背景

作为一名合格的前端开发工作者，深知在webpack在前端开发当中的重要性，无论是开发vue项目还是react项目，或许你使用过他们的脚手架(vue-cli、create-react-app……)去搭建项目，但是脚手架的底层也是在使用webpack做工作，偶尔还需做一些额外的配置，这就需要你熟练掌握webpack。

什么是webpack

概述: WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

形象理解一下: 把webpack比喻成一家家政公司，因为你懒，不爱收拾屋子，家里很乱(未使用webpack之前的项目代码)，找到了家政公司，家政公司派来了一些受过训练的专业人员(webpack中的一些解析编译工具)，他们通过一系列的归纳整理，把你本来混乱的屋子收拾的井井有条，虽然东西没怎么变，但是提高了你的生活质量。嗯。。。类似于这样

为什么使用webpack

日常开发中，js大多数是运行在浏览器环境下的，自es6出现至今，开发者大多已习惯了使用es6的新特性新语法，但是一些老版的浏览器还没有完美的支持es6，那么，我们开发中常用的es6代码就不能直接在浏览器上运行了，此时就要用到了webpack，webpack通过一系列处理，将我们的es6语法解析转化为浏览器可以认识并执行的代码片段。
附加目前浏览器对es6支持情况的图表地址：http://kangax.github.io/compat-table/es6/

webpak打包过程

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

1. 利用babel完成代码转换,并生成单个文件的依赖
2. 从入口开始递归分析，并生成依赖图谱
3. 将各个引用模块打包为一个立即执行函数
4. 将最终的bundle文件写入bundle.js中

核心

• 入口：它指明了Webpack从哪一个模块开始打包

module.exports = {
	mode: 'development', 
	entry: {
		app: './src/app.js'
	}
};                                                                    //--webpack.config.js

它意味着Webpack会找到’./src/app.js’这个文件，从它开始打包。你在app.js中使用的任何导入，Webpack都会处理它们。但对于单页应用，它通常只有一个入口。你也可以有多个入口文件。

entry: {
	app: './src/app.js',
	list: './src/list.js'
},                                                                    //--webpack.config.js

app是键值，可以用这个键值生成出口文件的名字，并且使用

• 出口：output是用来配置Webpack把你的包输出到哪儿的。它默认输出到’./dist/main.js’。

module.exports = {
	mode: 'development', 
	entry: {
		app: './src/app.js'
	}，
	output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js'
    }
};                                                                    //--webpack.config.js

此时由于我们使用了入口文件的健值[name].js作为了出口文件的文件名，所以输出后的文件为dist目录下的app.js，当然也可以正常的指定你想要的出口文件名，例如：main.js

//多入口对应的多出口
module.exports = {
    mode: 'development', 
    entry: {
        app: './src/app.js',
        list: './src/list.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname,'./dist')
    }
};                                                                       //--webpack.config.js

• loader：loader 能够让 webpack 去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。比如：解析css、html、图片等，需要用到css-loader、html-loader等，这里先不做赘述，详细应用将写在后面的文章里。仅举例子：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};                                                                     //--webpack.config.js

通过css-loader将css文件转为webpack能够理解的js文件，然后通过你在js的引用，webpack解析到模块间的依赖关系去做处理。

• plugins：plugin是webpack核心功能，通过plugin（插件）webpack可以实现loader所不能完成的复杂功能，使用plugin丰富的自定义API，可以控制webpack编译流程的每个环节，实现对webpack的自定义功能扩展。例如：HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');

module.exports = {
    mode: 'development', 

    entry: {
        app: './src/app.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Hello World app',
            filename: 'index.html',
            template: path.resolve(__dirname,'./src/index.html')
        }),
    ]
};

通过HtmlWebpackPlugin生成一个html模板文件输出到dist文件夹里，后续还可以对HtmlWebpackPlugin做一些详细化的配置，拓展它的功能性。

• 模式:
  mode:两种模式–development (开发模式)、production(生产模式)
  提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
  两种配置模式的区别
  1.development打包后，一些没有依赖的方法、变量、文件会保留，production则会移除。
  2.production打包后，代码会进行压缩，比development的文件小。