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

巴特西