Webpack5分钟入门教程

Webpack5分钟入门教程

前面讲解了Javascript模块化编程：模块的写法，下面我们来介绍一个具体的moduleloader—Webpack。

 我们新建三个js文件，module1.js module2.js 和scripts.js

在module1.js中写入:

console.log('moudle 1 stuff');

在module2.js中写入:

console.log('moudle 2 stuff');

在scripts.js中写入:

require('./module1.js');
require('./module2.js');

scripts.js中的意思为包含前面两个模块,js本身是不支持模块化加载的,这里需要使用webpack对require这种特殊的语法进行处理.

首先我们全局安装webpack

npm –install –g webpack

然后再项目目录写好webpack的配置文件

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
    context: __dirname,
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./js/scripts.js",
    output: {
        path: __dirname + "/js",
        filename: "scripts.min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
};

理解这个配置文件需要前面的知识

这里用直接覆盖exports为一个对象的方式,导出对外接口.  在avascript模块化编程：模块的写法有介绍

以上配置文件的含义为:

如果环境为production,则dubug模式为假,模块导出时候,会根据是否为debug模式进行一些配置:

如exports输出对象的devtool属性:如果为测试模式,则把map内联到文件中方便调试.(map文件的作用是,当你对文件进行丑化--uglify(把函数或变量的长单词换成简单字母,依此来压缩),你很可能找不到那单个字母原本对应的完成的函数名/变量名是什么,很难看懂,很难调试,好在丑化的时候,他会生成一个map信息,保持了单个字母到原来单词的对应,方便调试,类似的思想在sass中也有体现).

如果非debug模式,pulgins中指明了需要使用的插件:Dedupe意思是压缩,occurrenceOrder意思为模块去重(如果两个文件都require同一个模块,同时有两个一样的模块岂不很费空间).uglify前面已经介绍了把长单词换成简单字母, 把函数或变量的长单词换成简单字母,依此来压缩.

entry:指明要处理的条目

output:指明输出目录和输出的文件名.

配置好以后,我们就可以在配置文件所在的目录下运行webpack命令来实现模块化处理.

最上面的scripts.min.js就是我们调用webpack生成的文件

我们打开看一下:

/******/ (function(modules) { // webpackBootstrap
/******/   // The module cache
/******/   var installedModules = {};
/******/
/******/   // The require function
/******/   function __webpack_require__(moduleId) {
/******/
/******/      // Check if module is in cache
/******/      if(installedModules[moduleId])
/******/         return installedModules[moduleId].exports;

出现这个样子就表示,require这个特别的模块化函数,被正确的处理了.

当然webpack的用途远不止加载模块这么简单,还可以用它来监视js的改变,如果有改变,则立即重新生成js:

使用webpack –watch 即可实现

还可以做到DreamWeaver的效果,即所见即所得的编辑效果,对静态文件的修改,可以立即体现到浏览器上

使用webpack –dev-server –content-base src –inline –hot(hot意思为热插拔,对静态文件改变后浏览器会自动刷新,以前都是改变了之后,手动刷新,手都按酸了有没有? 现在静态文件改变后可以自动刷新了,很爽吧)

也可以代替或者联合gulp grunt的流程化处理的功能：压缩 丑化等

这里提一下:很多浏览器还不支持ES6,但我们可以用ES6的写法,到时候Babel会自动帮我们把ES6的语法转变为ES5的,这样就可以解决浏览器对ES6的支持问题.

package.json中的script段

“scripts”:

{

“dev”:”命令”

}

这样你使用npm run dev时,便会执行dev对应的命令,你可以按照需要,改成自己需要的形式.