Webpack系列:入门

简介

webpack是一个JavaScript应用的静态模块打包器,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。webpack本身只认识和理解JavaScript(.js)。

任何一个静态资源,都可以被视为是一个模块(将程序分解成离散的功能块)

几种引入方式:import、require、@import

webpack有一个loader的概念, 因为它本身只理解JavaScript,那么其他的像.css文件就需要loader来处理。loader可以将所有类型的文件转换成webpack能够处理的有效模块。接着就可以利用webpack的打包能力将这些转换后的文件进行处理。

loader 能够用 import 导入任何类型的模块(例如 .css 文件)供webpack处理,这是 webpack 特有的功能

四个核心概念

在介绍之前先了解一下webpack.config.js文件,它是webpack的默认配置文件,在命令行中直接输入webpack的话,程序就会默认去载入当前目录下的此文件。如果文件名不是这个,那么需要在输入指令时指定配置文件:webpack --config config_name

入口(entry)

entry指示webpack应该使用哪个模块来作为构建其内部依赖图的开始,相当于webpack程序的入口,进入入口之后,webpack会找出与此文件相关联(直接或间接)的模块和库,然后对这些模块和库进行处理,最后输出到一个指定的文件中。

用法

webpack.config.js:

module.exports = {
    entry: {
        hello: __dirname + '/src/script/hello.js'  // 使用__dirname
    }
    // 或者是对象形式 entry: {}(代码分离)
}

出口(output)

这个属性告诉我们打包后的文件去向,可以有多个入口,但是只能有一个出口。

用法

module.exports = {
    entry: './hello.js',
    output: {
        path: __dirname + '/static/js/',// 指明打包后的文件输出路径
        filename: '[name]-[hash].bundle.js'// 指明打包后的文件名
    }
}

转换器(loader)

文章开头就已经提到这家伙,想要.txt.css文件生效,就必须用它,用它有三种途径:

  • CLI:也就是命令行的方式使用
webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'
  • webpack.config.js:
module.exports = {
    entry: __dirname + '/hello.js',
    output: {
        path: __dirname + '/static/js/',// 指明打包后的文件输出路径
        filename: 'bundle.js'// 指明打包后的文件名
    },
    module: {
        rules: {
            test: '正则表达式,如:/\.txt$/',
            // use: {loader: 'css-loader'},
            use: 'style-loader','css-loader'
        }
    }
}

在 webpack 配置中定义 loader 时,要定义在 module.rules 中,而不是 rules。更多的rules参数

  • 内联:
require('style-loader!css-loader!./style.css');// 在要使用的模块中引入`style.css`,并且使用两个`loader`来处理这个css文件

更多的loader转换器

插件(plugins)

插件的作用是为了执行loader无法执行的任务,想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。

剖析

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。

function ConsoleLogOnBuildWebpackPlugin() {

};

ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("webpack 构建过程开始!!!");

    callback();
  });
};

用法

由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例。webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: __dirname + '/path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

webpack的安装和命令行

在你认为方便的目录下初始化npm:npm init,再使用以下命令安装webpack:

$ npm install webpack --save-dev

这个命令会把webpack安装到当前所在目录下,并且会自动在package.json中自动添加devDepandencies

--save-dev 是为了方便自动添加devDepandencies,这是开发时的依赖,--save是自动添加dependencies,这是运行时依赖

创建一个文件叫hello.js(与生成后的node_module同级别),内容如下:

function hello(str) {
    console.log(str);
}

hello('zeng');

创建一个html文件(index.html,与生成后的node_module同级别):

<!DOCTYPE html>
<html>
<head>
    <title>webpack</title>
    <!-- 这里的bundle.js是等会webpack后的hello.js -->
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>

创建好之后,再次回到命令行并输入:webpack hello.js bundle.js,第一个文件是需要被打包的文件名,第二个文件是需要被打包的文件在打包后的文件名。

看到这张图的时候,说明打包成功了,运行index.html就能看到运行的结果了(我这里是打包了三个文件)。Chuncks代表的是区块号,打开打包后的文件就会发现在自己写的代码上有这个区块号。

第二种启动webpack的方式

在package.json中,找到scripts,然后添加webpack脚本命令:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

编写好了之后,在命令行运行:npm run webpack即可。

Last modification:February 11th, 2018 at 04:23 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment