WebPack4.X配置指南
一、简介
(一)WebPack简介
Webpack是一个前端自动化打包工具,根据它的名字也很好理解,web-pack顾名思义就是前端打包工具,它是基于Node和NPM的,所以在安装使用webpack之前,需要安装nodejs,nodejs的版本过低也不行,所以推荐安装nodejs版本为v8.11.2以上,npm版本为v5.6.0以上。
二、项目建立
(一)项目建立
第一步:新建一个文件夹,命名为mywebpack;
第二步:在cmd命令框中使用cd命令切换到mywebpack目录中,输入npm init或npm init -y,创建package.json文件,需要注意的是如果package.json的名称为webpack可能会报错。
第三步:将mywebpack文件夹插入到VSCode等编辑工具中,并在mywebpack根目录下新建一个webpack.config.js文件。
关于webpack.config.js中常见配置项的说明如下:
先做一个默认配置,如下:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/app.js'), //入口文件
output: {
path: path.resolve(__dirname, './dest'), //打包后的目录
filename: 'dabao.js' //打包后的文件名称
}
}
注:可以将上面的配置项拷贝到你的webpack.config.js文件中。
第四步:在第三步中的配置内容需要注意两个文件及一个路径:
entry: path.resolve(__dirname, './src/app.js')
path: path.resolve(__dirname, './dest')
filename: 'dabao.js'
path: path.resolve(__dirname, './dest')及filename: 'dabao.js'这两个配置项的意思是webpack打包完成后会在mywebpack项目根目录中自动创建dest目录,dest目录中自动创建dabao.js文件;
entry: path.resolve(__dirname, './src/app.js')是需要你在mywebpack项目根目录创建一个src文件夹,然后在src文件夹中创建一个app.js、m1.js、stu.json文件。
要打包的目录结构及代码如下:
第五步:使用webpack打包第四步中的内容则需要使用npm安装webpack和webpack-cli,在cmd命令框中输入:
npm install webpack@4 webpack-cli -g
第六步:
1、在mywebpack项目根目录下新建src目录,在src目录中新建m1.js文件,m1.js文件内容如下:
exports.xingming = 'lisi';
module.exports.age = 20;
module.exports.fn = function() {
console.log('fn在m1.js文件');
}
2、在mywebpack项目根目录下新建src目录,在src目录中新建stu.json文件,stu.json文件内容如下:
{ "age": 21, "usr": "lisi" }
3、在mywebpack项目根目录下新建src目录,在src目录中新建app.js文件,app.js文件内容如下:
let m1 = require('./m1.js');
console.log(m1);
let stus = require('./stu.json');
console.log(stus);
在命令行终端中执行webpack命令:
在命令行终端中执行完webpack命令后,就会在myapp项目根目录中创建一个dest文件夹,并在dest文件夹新建一个dabao.js文件,如下:
注:打包之后的dabao.js文件可以在前端html文件中使用了(比如:可以在dest目录中新建demo.html文件,然后在demo.html文件使用dabao.js文件),而src/app.js不能直接在前端html文件中使用。
三、模块和插件配置安装
(一)配置HTML模板
可以安装一个html-webpack-plugin插件来打包html模板(如:在src目录下新建index.html文件,),并将该模板指向对应的入口文件。
安装html-webpack-plugin插件,如下:
npm i html-webpack-plugin@4 -D
然后在mywebpack项目根目录的src目录中新建index.html,其内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>