webpack入门——构建简易版vue-cli

时间 2019-11-13 标签 webpack 入门构建简易版 vue cli

前言：（面试让介绍webpack，你能够这么答）简单地说，Webpack其最核心的功能就是 解决模板之间的依赖，把各个模块按照特定的规则和顺序组织在一块儿，最终合并成一个JS文件（好比bundle.js）。这个整个过程也经常被称为是 模块打包。换句话说，Webpack是一个指令集合的配置文档，而后经过配置好的这些指令去驱动程序作一些指令要求要作的事情。而这些动做都是经过本身写的规则去作编译，并且经过JavaScript的引入（import）语法让Webpack知道须要它帮忙编译什么东西（好比Pug、Sass等等）。因此咱们始终会有一个入口文件（好比index.js）注入那些Preprocess，让那些Preprocess能够经过这些入口文件的JavaScript让Webpack去根据相关的配置指令编译它，而后打包到一个出口文件中，好比bundles.js。php

用vue-cli1/2搭建一个vue项目时，能够看到有不少关于webpack配置的文件。咱们不须要知道那些繁琐的配置文件有什么做用，只需在控制台输入npm run dev，项目自动启动，咱们就能够愉快的写业务代码了。css

虽然vue-cli帮咱们作好了一切，咱们就能不用学webpack了吗？NoNoNo...现代前端工程师必备的技能就是模块化构建打包项目，不信去那些招聘网站的前端JD看看。废话很少说，下面让咱们用webpack构建一个简单的vue-cli。前端

第一步：安装NodeJS（webpack基于NodeJS）

下载地址：http://nodejs.cn/download/，傻瓜式安装，一直下一步就ok。安装完毕，在控制台输入node -v检查是否按照成功。vue

NodeJS是JavaScript的运行环境，像浏览器同样。安装以后能够经过node命令运行JavaScript代码，好比：node a.jsjava

npm（node package manage of JavaScript）做用：Node.js下载后自带npm，相似于迅雷下载资源，能够下载项目所需的依赖模块/包。node

容许用户从NPM服务器下载别人编写的第三方包到本地使用。
容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。

npm是国外的，可能会比较慢，建议安装cnpm，安装方法：npm install -g cnpm --registry=https://registry.npm.taobao.orgwebpack

第二步：`npm init`初始化生成package.json

首先创建一个空的项目文件夹，
进入文件夹，shift+右击，出现【在此处打开命令窗口(W)】，
点击进入cmd控制台，命令路径即为当前文件夹目录，
而后输入npm init -y，回车，以后会在根目录建立一个package.json。

package.json用来存放整个项目的依赖模块/包，当咱们把整个项目迁移到别的地方使用时，项目运行时会根据package.json的依赖参数自动下载所需模块/包。git

第三步：安装webpack

建议安装wepack3，webpack4对vue-cli的兼容还不是很好es6

命令：npm install webpack@3.12.0 --save-devgithub

测试webpack在本地是否可用，webpack -v若是出现webpack为无效命令，则使用全局安装webpack：npm install webpack@3.12.0 -g。安装成功后就可使用webpack命令玩耍了。

webpack能够看作是模块打包机：全部资源均可以当成模块，通过loader处理，最后打包成一个文件。

Grunt和Gulp的工做方式是：在一个配置文件中，指明对某些文件进行相似编译，组合，压缩等任务的具体步骤，工具以后能够自动替你完成这些任务。

webpack核心模块：

entry: 入口文件，能够多个
output：出口文件，只能一个
loader：帮助webpack处理js之外的文件
plugins：加强webpack的能力，作更多的事

第四步：webpack打包模块

不少文件类型，好比vue、css、img、字体...须要咱们配置相应的loader才能完成正确解析并打包。

好比，把css打包到js文件中，须要安装css加载器，安装命令：npm install --save-dev style-loader css-loader
css-loader 和 style-loader，两者处理的任务不一样
css-loader使你可以使用相似@import 和 url(...)的方法实现 require()的功能
style-loader将全部的计算后的样式用<style></style>加入页面中，两者组合在一块儿使你可以把样式表嵌入webpack打包后的JS文件中

命令行打包（不推荐）：

webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自动建立dist目录

这种打包方式，在js文件中引入css文件时要注明loader：require('style-loader!css-loader!../css/index.css') 注意顺序不能错！

配置文件打包（推荐）：
须要在项目的根目录建立webpack.config.js.项目里配置以下：

module.exports = {
    entry:  __dirname + "/src/main.js",// 入口文件，能够多个
    output: {
        path: __dirname + "/dist",  // 绝对路径，打包后的文件存放的文件夹
        filename: "build.js"  // 相对路径，打包后输出的文件
    },
　 // 1. 不一样webpack版本配置loader的方式不一样，webpack3用loaders，webpack4用rules
    // 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就能够写成 require('../css/index.css')
　module: {  
       loaders: [
          {
             test: /\.css$/,
             loader: 'style-loader!css-loader'
         },
         {
            test: /\.(jpg|png|jpeg|svg)$/,
            loader: 'url-loader',
            options: {
                  // 大于10000字节会被打包成重命名的图片资源，不然打包成base64
                  limit: 10000
              // name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
         },
         {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: ['env'], // 处理关键字，es6/7/8/9...都能转化
              plugins: ['transform-runtime'] // 处理函数
            }
          }
      ]
   }
}

package.json中配置scripts:{"build": 'webpack'}（webpack命令会默认运行webpack.config.js文件），执行npm run build便可打包

第五步：搭建webpack服务器

上面4步就能够完成项目的打包任务，可是开发环境还须要更进一步配置。

webpack-dev-server能够像php/java/.net...同样搭建为咱们搭建一个服务器，这样就能够热更新项目代码，实现实时运行项目，进而方便咱们调试项目。

安装： npm install webpack-dev-server -g
写入到依赖： npm install webpack-dev-server --save-dev
配置命令：scripts:{"dev": 'webpack-dev-server --hot --inline'} // 实现热更新和在线编译
运行命令：npm run dev
输入localhost:8080/运行... // webpack-dev-server的默认端口是8080

具体代码见：https://github.com/cwh2407606301/webpack-vue-cli