webpack 基础教程

2017-05-15 本文已影响0人 oyakuki

什么是webapck?

简单来说，Webpack 就是一个针对 JavaScript 代码的模块打包工具。但是自发布以来，它演变成了一个针对所有前端代码的管理工具。

以前的代码的运行方式：

旧的任务运行方式

旧的任务运行工具处理方式：HTML、CSS 和 JavaScript 都是分离的。必须分别对每一项进行管理，并且还要确保所有东西正确地部署到生产环境。

像 Gulp 这样的任务运行工具可以操作很多不同的预处理器和编译器，但是在所有情况下，它都需要接收一个源码输入并将其处理成一个编译好的输出。然而，它是在不关心整个系统的情况下逐个去处理的。这就是开发者的负担了：检查任务运行工具有无遗漏的地方，并为所有改动的部分找到正确的方式，将它们在生产环境上协调一致。

Webpack 通过一个大胆的询问试图减轻开发者的负担：如果开发过程的某个部分可以自己管理依赖会怎么样？如果我们可以以这样一种方式来简单地写代码：构建过程仅基于最后所需要的东西来管理它自己，会怎么样？

经过webpack处理后

Webpack 处理方式：如果是 Webpack 知道的代码，那么它就只会打包实际在生产环境当中使用的部分。

换句话说：你不是为了 Webpack 写代码，而是为了你的项目写代码。而且 Webpack 在保持进步（当然包括某些配置）。
总而言之，如果你曾经挣扎于下面这些情况中的其中之一：

不小心将一些不需要的样式表或者 JS 库引入生产环境，导致项目体积变大
遇到作用域问题 - 不管是来自 CSS 还是 JavaScript
不停寻找一个好的系统好让你可以在 JavaScript 代码里使用 Node 或 Bower 的模块，或者依赖一系列疯狂的后端配置来正确地使用那些模块
需要优化资源分发机制却又担心会破坏掉某些东西

那么你就可以受益于 Webpack 了。它通过让 JavaScript 取代开发者的大脑来关心依赖和加载顺序，轻松地解决了上面这些问题。

webpack安装

由于webpack是一个基于node的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm。

如果速度太慢，建议大家使用cnpm。

首先，全局安装：

npm install webpack -g

安装成功之后，在命令行输入webpack -h即可查看当前安装的版本信息，以及可以使用的指令

webpack -h

当然，我们都应该将webpack安装到当前项目的依赖中，此时就可以使用项目的本地版本webpack

// 确保已经进入项目目录
//初始化一个package.json文件
npm init
//一路回车即可
// 安装webpack依赖，这里我们安装1.14.x的版本
npm install webpack@1.14 --save-dev
// 简写
npm install webpack@1.14 -S
// –save：模块名将被添加到dependencies，可以简化为参数-S。
// –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。

安装好之后我们的package.json应该是这样的：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^1.14.0"
  }
}

webpack配置

webpack会自动搜索当前目录下的webpack.config.js文件，按照配置文件运行

下面是一个简单的webpack配置文件，只处理js

var path = require('path'),
webpack = require('webpack')

module.exports = {
  entry: './src/main',
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/[name].js',
    publicPath: '/dist/'
  }
};

配置

entry

webpack入口设置

module.exports = {
  entry: './src/main'
}

这里定义入口文件，可以单个，可以多个：

module.exports = {
  entry: {
    app: './app',
    index: './index'
  }
}

这里的入口文件路径都是相对于webpack.config.js文件的路径，文件后缀.js可以省略

output

打包编译输出设置

module.exports = {
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/[name].js',
    publicPath: '/dist/'
  }
}

output.path

打包编译生成的文件存储路径，这里是绝对路径

output.filename

打包编译生成的文件名，这里[name]会根据入口定义自动生成文件名

output.publicPath

其它文件生成的路径，例如：css、图片等等

loader介绍

Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如VUE、JSX、SASS 或图片。

配置可以如下的写法：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.vue$/, // 这里是正则表达式
        loader: 'vue'  // 这里是对应的loader
      },
      {
        test: /\.css/,
        loader:  'style-loader!css-loader'
      }
    ]
  }
}

loader怎么来呢，很简单，通过npm直接安装

npm install vue-loader css-loader vue-template-compiler -S

安装之后我们的package.json

 "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.26.2",
    "vue": "^2.2.1",
    "vue-loader": "^11.1.3",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.2.1",
    "webpack": "^1.14.0"
  }
}

于是，我们的webpack配置文件就变成一下的样子：

var path = require('path'),
webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.css/,
        loader: 'style!css'
      }
    ]
  }
}

未完：https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/
https://github.com/petehunt/webpack-howto/blob/master/README-zh.md