从零搭建 webpack3 环境 #1 - 安装使用

目录：

　　（1）什么是webpack

　　（2）webpack核心概念

　　（3）环境安装

　　（4）开始使用webpack

 

一、什么是webpack

　　官网的一幅图对webpack的解释，从图中能够看出，webpack 能够看作是模块打包机：它作的事情是，分析你的项目结构，找到 JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用。

　　　　

　　

　　

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

　　咱们看维基百科对webpack的描述。

　　　　Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺少的模块化开发方式，将各类静态资源视为模块，并从它生成优化过的代码。Webpack能够从终端、或是更改 webpack.config.js 来设置各项功能。

　　简单的说，经过webpack，咱们能够以模块化的方式开发咱们的项目，咱们能够把开发中的全部资源（.png、js 文件、css 文件等）都当作模块，对资源进行处理和打包成浏览器能够直接使用的静态资源文件。

二、核心概念

　　webpack的四个核心概念：

（1）entry（入口）

　　入口起点，指示webpack应该使用哪一个模块，来做为构建其内部依赖图的开始

（2）output（输出）

　　告诉webpack在哪里输出它所建立的bundles，以及如何命名这些文件

（3）loaders（加载器）

　　让webpack可以去处理那些非JavaScript文件，loader 能够将全部类型的文件转换为 webpack 可以处理的有效模块，而后你就能够利用 webpack 的打包能力，对它们进行处理。

（4）plugins（插件）

　　　　　　　　插件能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。

三、环境安装

　3.一、安装Node.js（已安装跳过）

　要使用 Webpack 前须先安装Node.js，下载直接安装便可，

　安装完成后能够在命令行中使用 node -v 查看当前node.js 的版本

　　　　　　　

　3.二、安装cnpm（已安装跳过）

　由于npm的镜像在国外，在国内下载速度会很慢。咱们可使用淘宝的镜像

　输入如下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

　而后经过cnpm -v 查看当前cnpm版本，能成功查看，说明安装成功

　3.三、安装webpack

　经过cnpm全局安装webpack，输入命令

cnpm install webpack@3.6.0 webpack-cli -g 

　安装完成后输入webpack -v 查看webpack版本

webpack -v

四、开始使用webpack

　　（1）首先新建一个文件夹，做为项目文件夹，如：新建一个 webpack-demo文件夹

　　（2）打开命令行进入到webpack-demo文件夹中，使用npm初始化项目，一直enter就OK

npm init

　　初始化完成后，会生成一个package.json文件。

　　（3）新建一个入口js，如app.js

　　　　简单的输出一句hello word 

　　　　

　　（4）在项目跟目录下新建一个webpack配置文件，webpack.config.js

var path = require('path');

module.exports = {
    entry: {
        app: './app.js'   // 入口js文件
    },
    output: {
        path: path.resolve(__dirname, './dist'),   // 打包后文件输出的目录
        filename: '[name].js'       // 打包后输出的文件名称
    }
}

　　　　这是一个最简单的webpack配置。

　　（5）最后在项目文件夹下经过命令行 webpack命令 执行 webpack打包

　　

　　（6）最后能够在dist文件夹下看到webpack输出的文件。