Webpack -- 基础篇

篇仅演示 webpack 的基础搭建，为入门和走通基本流程而写。仅 window 系统。

1. 安装一些东西

安装 nodeJS，下载链接。然后检查安装是否完成。

系统“开始”和“R”键同时按住，桌面右下角出现运行界面，输入 cmd 回车或点击确定。

然后会出现黑色的系统调试器。分别输入以下两行内容，观察已安装程序的版本好。

 

2. 全局安装 cnpm 和 webpack

使用 cnpm 比 npm 下载更快一些，在该系统调试器中继续输入 npm install -g cnpm。等待此过程完成。

 

接着输入 npm install -g webpack。等待此过程完成。花花绿绿很大一片（就不贴图了）。

再接着输入 webpack -v 查看版本号，检查是否安装完成。

3. 新建项目文件夹

找个你喜欢的地方新建一个空文件夹，复制其磁盘地址。

然后在系统调试器中输入 cd /d [dirname]。如下：

接着输入 npm init。如果始终中途中断，可输入 npm init -y。一路按回车直到结束。

如果上两种方法都走不通，那就自己手写新建一个 package.json 吧，里面的代码如下。

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

再在系统调试器中输入 cnpm install --save-dev webpack。等待此过程结束。

此时的文件管理器中则形成了如此的目录结构。

如果 webpac.config.js 未出现，那又得你手写新建了。代码如下：

'use strict';

var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  entry: APP_PATH,
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
};

其中 app 和 build 分别为 webpack 的输入路径（要压缩等操作的文件）和输出路径（已压缩等着上线的文件），bundle.js 为最终打包生成的文件，需要我们新建一下空文件夹。

之后我们再分别在该项目中添加一堆项目所需的文件，包含了 css/sass/js/json/图片等，在此仅贴出文件目录，如下。

index.html 中仅引用一个最终打包生成文件 bundle.js 就好了，它包含了 app 文件夹内的所有。

 4. 安装各种 loader

比如，我想让我的 js 能支持 es6，那么就安装 babel-loader 和 babel-core。在系统调试器中输入：

cnpm install --save-dev babel-loader babel-core

比如，我项让我的 css 能加前缀，支持最新的 css3 属性和方法，那就使用 postcss-loader。在系统调试器中输入：

cnpm install --save-dev postcss-loader autoprefixer precss

但使用 postcss 还需要一个 postcss.config.js 文件，内容如下：

//  postcss.config.js
module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

再比如，我想使用 sass 来写 css，那就下载 sass-loader 和 node-sass。在系统调试器中输入：

cnpm install --save-dev sass-loader node-sass

安装完这些，我们再来配置webpack.config.js，如下：

'use strict';

var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  entry: APP_PATH,
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.json/,
        loader: 'json-loader'
      },
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
      },
      {
        test: /.sass/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax'
      },
      {
        test: /.scss/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded',
      },
      {
        test: /.less/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader'
      },
      {
        test: /.css$/,
        loader: 'style-loader!css-loader!postcss-loader',
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /.(mp4|ogg|svg)$/,
        loader: 'file-loader'
      },
    ]
  },
};

5. 运行 webpack

在系统调试器输入以下不同语句，将得到不同结果

webpack -v 为查看版本

webpack 直接进行压缩，app 文件夹的东西全部打包成 bundle.js

webpack -w 不用每次修改完都来调试器运行一次打包，每个文件的保存就会打包，在浏览器中刷新就能看到最新结果

webpack -p 生成发布版，不但打包，还压缩代码

以上即为静态文件打包的全过程，可访问本页面以获得源码。

webpack 还远不止这些，它还能设定不同的开发环境，生成到不同文件夹，不用刷新浏览器的热更新等功能，这些将在后续篇章中演示。