Webpack实战学习

2017-04-11 本文已影响27人陈川Lethe

Webpack涉及到的命令行：

# 安装到全局
$ npm install webpack -g

# 安装到项目本地依赖
$ npm install webpack --save-dev

# 查看 webpack 版本信息
$ npm info webpack

# 安装指定版本的 webpack
$ npm install webpack@1.14.0 --save-dev

# 安装Webpack开发工具
$ npm install webpack-dev-server --save-dev

# 安装css、style loader
$ npm install css-loader style-loader -save-dev

webpack实际操作：

# 基本方法
$ webpack

# 提供watch方法，实时进行打包更新
$ webpack -w

# 对打包后的文件进行压缩，提供production
$ webpack -p

# 提供source map，方便调试。
$ webpack -d

最最基础的用法：

建一个文件夹，然后在文件夹根目录下面建这个几个文件：

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

// entry.js
document.write(require('./module.js'))

// module.js
module.exports = 'It is OK!'

在命令行执行以下指令：

$ webpack entry.js bundle.js

这条命令的作用是将entry.js打包到bundle.js
其中entry.js还引用到module.js，module.js也被一并打包到bundle.js

这时双击打开index.html文件，就可以看到 “It is OK!” 几个字。

Loader：

Webpack本身只能处理javascript文件，有了Loader之后，几乎可以通过require来加载任何类型的文件或者模块，比如：图片、JSX、LESS等。

--------此处省略Loader的特性等，先把例子写起来再说--------

Loader的使用：

安装Loader:

$ npm install css-loader style-loader

还是上面的例子，现在我们来写一个css：

/* style.css */
body {
    background-color: grey;
}

然后在entry.js中引入这个文件：

// entry.js
require("./style.css");
document.write(require('./module.js'));

接着命令行执行：

webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

打包好之后，刷新index.html，就可以看到刚刚写的css样式了。

但是每次要在命令行输入这么长的命令，显然很不好，所以要搞个配置文件，来简化命令，然后其他人参与这个项目，跟着配置文件走就行了。

配置文件：

Webpack在运行时，除了命令行执行操作，也可以通过配置文件来执行。默认情况下会搜索当前目录的 webpack.config.js ，这个文件是一个node.js模块，返回一个json格式的配置信息对象，或者通过 --config 选项来指定配置文件。

来建一个配置文件 webpack.config.js:

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'}
        ]
    }
}

在配置文件中配置好入口、出口、loader，在命令行执行：

$ webpack

非常一颗赛艇。

插件：

插件可以做很多loader做不了的事情。
wenpack已经内置很多常用的插件，也可以通过npm来安装第三方插件。

动词打次搞起来：

我们自己来搞一个插件，修改一下webpack.config.js:

var webpack = require('webpack');

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'}
        ]
    },
    plugins: [
        new webpack.BannerPlugin('苟利国家生死以，岂因祸福避趋之！')
    ]
}

可以看到改动的地方是增加了：

plugins: [
        new webpack.BannerPlugin('苟利国家生死以，岂因祸福避趋之！')
    ]

改好之后，执行webpack命令：

$ webpack

这时，我们看一下bundle.js，可以发现文件最上面多了一行注释：

/*! 苟利国家生死以，岂因祸福避趋之！ */
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
...

哈哈，溜得很。