Webpack详细入门教程（二）之安装配置

原创

BingCola 2022-07-20 06:23:49 博主文章分类：Webpack ©著作权

文章标签 webpack webpack教程 html 配置文件命令行 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者BingCola的原创作品，请联系作者获取转载授权，否则将追究法律责任

Webpack详细入门教程之安装配置

安装

Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack），在终端中转到该文件夹后执行下述指令就可以完成安装。

1.全局安装 (npm install -g webpack)

Webpack详细入门教程（二）之安装配置_命令行

2.进入项目目录(F:\webpack)安装(npm install --save-dev webpack)

Webpack详细入门教程（二）之安装配置_配置文件_02

项目目录中会生成一个node_modules文件夹

3.在项目下生成package.json文件(npm init)

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

Webpack详细入门教程（二）之安装配置_webpack教程_04

注：如果先npm init 再 npm install --save-dev webpack 且项目文件名为 webpack 则会报错

创建项目结构

1.创建如下目录结构

Webpack详细入门教程（二）之安装配置_命令行_05

2.1在demo的js下创建一个入口文件main.js
2.2在项目目录创建一个index.html用来调试使用
2.3在项目目录创建一个out文件夹用来存放输出文件
2.4在项目目录创建webpack.config.js配置文件

Webpack详细入门教程（二）之安装配置_webpack教程_06

3.配置webpack.config.js文件

首先介绍几个配置文件的参数.

entry：是页面入口文件配置（html文件引入唯一的js 文件）
output：对应输出项配置
path ：入口文件最终要输出到哪里，
filename：输出文件的名称
publicPath：公共资源路径

//webpack.config.js
module.exports = {
    entry : __dirname + '/demo/js/main.js',//入口文件
    output : {//输出文件
        filename : 'index.js',//输出文件名
        path : __dirname + '/out'//输出文件路径
    },
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。（这里相当于 ./）

4.index.html和main.js

<!-- index.html -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>

<body>
    <script src="out/index.js"></script>
</body>

</html>

//main.js
document.write('Hellow Webpack!');

之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入webpack或者webpack -w命令, out文件夹下会生成index.js

Webpack详细入门教程（二）之安装配置_配置文件_07

打开index.html将会在页面正常显示 Hellow Webpack!，如下图

Webpack详细入门教程（二）之安装配置_webpack教程_08

webpack 和 webpack -w 区别 :
webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包(修改后刷新页面即可),
但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 (ctrl+c)

更快捷的执行打包任务

在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下:

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^3.8.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "build": "webpack -w"
  },
  "author": "",
  "license": "ISC"
}