Webpack4 学习笔记 - 01:webpack的安装和简单配置
安装 webpack
新建一个Demo文件夹,执行初始化:
npm init
在Demo文件夹里安装 webpack
和 webpack-cli
:
npm install webpack webpack-cli -D
webpack-cli
可以使用命令行的方式来使用 webpack
,从版本4开始,webpack
和 webpack-cli
分别管理, 如果不安装 webpack-cli
, 就没法使用命令行了。安装完之后,执行
webpack -v
查看安装是否成功。但是,命令执行后,会给你一个大大的错误提示,类似这样:
webpack: command not found
这是因为 webpack
并非全局安装的,当输入这个命令时,npm
会从全局的目录模块中找 webpack
,找不到就报错了。
那怎么运行刚装好的 webpack
呢? 通过 npx
命令来运行就OK了:
npx webpack -v
npx
会寻找存在于项目内node_modules目录下的安装包。
创建项目并简单配置
webpack
安装完毕,接下来就开始写demo,创建几个文件夹和文件,如图:
https://segmentfault.com/img/bVbo6iX?w=175&h=194
index.html 中的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack4 学习笔记</title>
</head>
<body>
<div id='root'></div>
<script src='./dist/bundle.js'></script>
</body>
</html>
header.js中的内容:
function Header() {
var dom = document.getElementById('root');
var header = document.createElement('div');
header.innerText = '这里是Header区域';
dom.append(header);
}
module.exports = Header;
index.js中的内容:
const Header = require('./header.js');
new Header();
webpack.config.js中的内容:
const path = require('path'); // 得到的path为webpack.config.js所在的目录
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development'
}
其中 webpack.config.js
是 webpack
的默认配置文件,关于 webpack
的配置信息默认都要写到这个文件中。
entry
是 webpack
要打包的入口文件,必须要提供一个入口,webpack
才知道从哪里开始打包,否则会报错,这里的入口文件就是src目录下的index.js文件。
output
是出口文件,即打包过的文件放到哪里了。path
就是存放的路径,path.resolve(__dirname, 'dist')
表示路径为根目录下的dist文件夹。filename: 'bundle.js'
表示打包后的文件名为bundle.js。
mode: 'development'
表示当前的工作模式为开发环境,如果不配置 mode
则默认为 production
,即生产环境。
简单配置完成,运行命令:
npx webpack
可以看到文件已经打包好,webpack自动生成了一个dist目录,并把bundle.js放在了该目录下:
打开index.html,可以看到内容正确显示出来:
OK,一个简单的配置完成了。
如果不想通过
npx wepack
这个命令来打包,可以在package.json中配置下 scripts
:
"scripts": {
"bundle": "webpack"
},
这样,在命令行输入
npm run bundle
同样会完成打包,而且这种配置很灵活,后续可以配置不同的命令来打包出不同的结果。
上一篇: 百度云身份证识别以及获取身份证信息
下一篇: webpack的安装+使用