还在愁webpack如何配置吗?不妨来这里看看(未完待续...)

426 阅读4分钟

一、什么是webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

这里解更多关于 JavaScript 模块和 webpack 模块的信息

二、安装webpack

1. 安装webpack前的准备工作

1.1 安装node 和 npm

// node官网:https://nodejs.org/en/
// node中文网 http://nodejs.cn/download/

我的电脑安装环境:Windows7  x64
1.下载安装包“node-v0.12.0-x64.msi”后双击,然后一路next点击
2.Node.js默认安装路径为“C:\Program Files\nodejs\”,建议不要修改
3. 最后点击 Install 安装完成

打开cmd输入node -v 检查是否安装成功

检查node版本

npm不需要单独安装,node安装完成npm也安装好了,输入 npm -v检查npm是否安装成功

检查npm版本

npm install xxx -g 全局安装时的安装包都在哪里呢? 输入 npm config ls 查看配置,找到对应目录打开就发现全局安装的文件位置了哦,如下图

查看npm配置
npm全局安装目录

一切就绪就可以开干了~

1.2 创建一个文件目录,放置你的项目

$ mkdir webpack-start
$ cd webpack-start

在该目录下执行npm init,生成package.json

$ npm init

npm init
生成package.json

1.3 安装webpack

$ npm install webpack webpack-cli -D

npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包

webpack安装到devDependencies中

2.配置webpack

2.1 感受 webpack4 的 0 配置

webpack打包会找到src下的index.js进行默认打包,所以先新建src目录,并创建index.js文件,如下图:

目录

// src/index.js 中写了一句hello world

document.write("hello world");

此时就可以执行一下webpack打包命令了。 在此之前先插播一个小知识点:

  • npm 5.2.0 版本中内置了伴生命令:npx,类似于 npm 简化了项目开发中的依赖安装与管理,该工具致力于提升开发者使用包提供的命令行的体验。
  • npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去 PATH 里找。如果依然找不到,就会帮你安装!

笔者本人本地npm已经升级到5.6.0了,查看npx的版本是9.7.1的,如下图:

npm 和 npx

那么此时我们就可以直接使用npx来执行webpack打包的操作喽~

// 执行命令
$ npx webpack

npx webpack打包

此时执行完会发现报一个警告,因为没有设置mode,如果不设置mode的情况下,打包出来的文件是自动压缩

打包完成后发现生成了一个dist目录和main.js文件(默认文件名)。

打包生成main.js

如果不想压缩的话可以执行

$ npx webpack --mode development

打包后的main.js内容就不会压缩

设置mode后打包不压缩

此时直接打包后的main就可以再浏览器中运行了,为了看效果,在dist目录下新建一个index.html,并引入main.js,然后用浏览器打开

新建html引入main.js
浏览器输出我们打印的“hello world”。
浏览器输出hello world

上面发现默认一些配置其实还是不能满足日常开发需要,所以我们还是对webpack进行一些配置,下面介绍webpack配置的问题。

2.2 快速配置webpack

在项目目录下新建webpack.config.js文件

/*创建并配置文件webpack.config.js
    entry:配置入口文件的地址
    output:配置出口文件的地址
    module:配置模块,主要用来配置不同文件的加载器
    plugins:配置插件
    devServer:配置开发服务器
*/

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件(比如dist)
    module: {},              // 对模块的处理 loader加载器
    plugins: [],             // webpack对应的插件
    devServer: {},           // 开发服务器配置
    mode: 'development'      // 模式配置
}
2.2.1 基于上面,我们先开始最简单的配置

配置entry和output,将src下的index.js 打包到dist目录生成 bundle.js

// webpack.config.js 

let path = require('path');
module.exports = {
    entry: './src/index.js',    // 设置入口文件
    output: {
        filename:'bundle.js',   // 打包后的文件名称
        path: path.join(__dirname,'dist')  // 设置打包到哪个目录下,且是绝对路径
    }
}

执行npx webpack后dist下生成bundle.js

bundle.js

2.2.2 配置执行文件

在package.json中配置scripts之后就可以通过npm run xxx 来执行命令。

scripts配置命令
配置了 "build": "webpack",可以通过执行 npm run build来打包,效果和上面打包一样。

2.3 多入口

有时候我们的页面可以不止一个HTML页面,会有多个页面,所以就需要多入口。

2.3.1. 没有关系的但是要打包到一起去的,可以写一个数组,实现多个文件打包成一个文件
// src/index.js

document.write("hello world");

新建test.js

// src/test.js

console.log('ok');
// webpack.config.js
// 1.写成数组的方式就可以打出多入口文件,不过这里打包后的文件都合成了一个

let path = require('path');

module.exports = {
    entry: ['./src/index.js', './src/test.js'],
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname,'dist')
    }
}

打包后dist下生成bundle.js:

打包后目录
在index.html中引用,效果如下:
不同文件打包成一个文件后结果

2.3.2. 每个文件都单独打包成一个文件的
// webpack.config.js
// 2.entry需要写成对象的方式,output中filename的name要根据entry中key进行匹配

let path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        test: './src/test.js'
    },
    output: {
         // 2. [name]就可以将出口文件名和入口文件名一一对应
        filename: '[name].js',      // 打包后会生成index.js和test.js文件
        path: path.join(__dirname,'dist')
    }
}

打包后dist目录下分别生成了index.js和test.js

生成两个文件

未完待续...

参考:

  1. webpack中文文档
  2. webpack英文文档
  3. Webpack 4 不完全迁移指北
  4. NodeJS入门(一)---nodejs详细安装步骤
  5. npx: npm 5.2.0 内置的包执行器