前端入门：Webpack的基本使用

1.Webpack介绍

webpack本质上是一个现代的JS应用的静态模块打包工具，核心的概念就是模块+打包。前端模块化在我的另一篇文章中有介绍：https://www.cnblogs.com/zyjfrontend/p/15431463.html

Webpack可以帮助我们进行前端模块化开发并处理好各个模块之间的依赖关系，而且不仅是js文件，css文件/图片/json文件等都会被当做模块来处理。Webpack的打包就是将前端的资源模块打包成一个个包，并且可以对这些资源做一些处理，转换成浏览器可以识别的模式。

2.Webpack和grunt/gulp的区别

grunt/gulp允许我们配置一系列的任务（比如ES6转ES5，图片压缩，TS转JS，SCSS转CSS），之后让grunt/gulp来依次执行这些task，来做到整个流程的自动化，所以grunt/gulp也被称为前端自动化管理工具。

如果项目中没有用到模块化的概念，只是做一些简单的任务处理比如合并压缩，我们可以选择使用grunt/gulp。如果项目中使用到了模块化原理并且各个模块之间的相互依赖非常强，那么我们就需要用到webpack了。

所以grunt/gulp更加强调的是前端流程的自动化，而webpack更加强调的是前端模块化开发管理。

3.Webpack的基本使用

Webpack的运行需要依赖node环境，所以我们要搭建node环境，并安装npm这个node包管理工具。

首先我们要安装Node.js,它自带一个包管理工具npm,我们可以用node -v命令来查看自己的node版本。

然后我们可以在全局中安装webpack（命令为 cnpm install webpack@3.6.0 -g）我们使用淘宝镜像来安装webpack, mac安装失败的话可以在命令前加上sudo，以管理员身份运行。

（我们也可以局部安装webpack, 使用--save-dev命令，这是开发时依赖，项目打包后不会继续使用）

为什么在全局安装webpack之后还需要局部安装：因为当我们在package.json文件中定义scripts时，如果其中包含webpack命令，那么他使用的就是局部webpack。

假设我们需要建立两个文件main.js和mathUtils.js，main.js依赖mathUtils.js并采用了commonJS的语法，但是浏览器并不支持这些语法，所以我们要运用webpack对main.js进行打包，我们可以cd到对应的文件夹之后输入webpack ./src/main.js ./dist/bundle.js的命令，将main.js打包成bundle.js的文件，这样commonJS的语法就有了底层支撑，而且只需要打包main.js即可，webpack会帮我们自动处理模块之间的依赖。最后我们只需要在Index.html这个文件中引用bundle.js即可运行所有的script文件。并且无论是用commonJS还是es6 modules，webpack都可以自动帮助我们处理这些依赖。

4.webpack.config.js的配置

const path = require('path')


module.exports = {
    entry: './src/main.js',
    output: {
        //需要动态的获取到绝对路径
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
    },
}

我们可以在webpack.config.js的文件中配置webpack启动的entry和output，其中output的path需要是绝对路径，那我们就需要使用Node自带的包path来获取到目标文件的绝对路径。为了在这个文件夹中使用node的包，我们可以执行npm init属性来生成package.json这个包管理的文件，然后通过npm install自动下载依赖的node包，然后通过webpack命令就可以打包对应的文件了。

但是如果我们直接使用webpack命令的话，会去运行我们在全局安装的webpack，可能与我们本地开发时想要使用的版本不一样，所以我们可以在package.json的scripts中添加

"build": "webpack"，这样我们使用npm run build的时候就会优先使用本地的webpack，我们只需要再局部安装Webpack即可，可以使用命令npm install webpack@3.6.0 --save-dev来局部安装，然后运行npm run build来使用Webpack打包（这样它会去本地的node_modules/.bin文件夹里面找webpack文件夹并运行，就不会优先使用全局了）

5.loader简介

对于webpack本身来说，它只能处理js相关的依赖，但是如果我们想处理一些css文件，把es6转es5，把typescript转es5，我们就需要加载一些对应的loader来扩展webpack本身的能力了。

假设我们需要在项目中打包css文件，那我们可以建立一个normal.css的文件并且在main.js中对其进行依赖（运用require语法即可）。然后我们可以在webpack官网中找到style-loader和css-loader的配置说明，将其下载引入之后使用npm run build即可。(这里为了和webpack的版本统一我们下载"css-loader": "^2.0.2", "style-loader": "^0.23.1"版本）

我们也可以按照同样的原理运用less-loader打包less文件,也可以运用babel-loader将es6语法转为es5。

但是当我们打包项目中的图片的时候，我们需要使用url-loader和file-loader，小于url-loader的limit的图片会使用url-loader编译成base64格式的文件，大于url-loader的limit的图片会使用file-loader打包到dist文件夹中，如果我们想正常使用则需要在webpack.config.js文件中配置publicPath属性。如果我们想要对打包后的背景图片进行命名的话，可以在options属性中加入name:'img/[name].[hash:8].[ext]来控制生成的图片名称。

6.vue+webpack

我们可以用npm install vue --save的方式引入vue（因为不止是开发时依赖，所以不用加-dev）

//使用Vue
import Vue from 'vue'

const app = new Vue({
    el: '#app',
    data: {
        message: 'hello'
    }
})
//在webpack.config.js中配置别名来使用runtime-compiler模式编译vue的template
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

然后就可以使用vue了。

如果我们想使用.vue文件来编译template的话，我们需要使用vue-loader和vue-template-compiler，可以运行命令npm install vue-loader vue-template-compiler --save-dev，然后在webpack.config.js中进行相应的配置，并且运行npm run build来重新打包即可。