1.基本准备
安装稳定版本的node.js,没有安装可以点击https://pan.baidu.com/s/1f4YhtpTFBKBZrzYVO1xHDw下载,提取码:1234。或者在node官网Node.js (nodejs.org)下载。
2.创建demo项目,安装webpack
在对应文件夹里创建一个demo1文件夹,然后执行命令
npm init -y
执行命令后会生成一个package.json文件
然后执行以下命令安装webpack.
npm install --save-dev webpack@4.43.0 webpack-cli@3.3.12
安装完成后就会出现node_modules和package-lock.json。webpack是webpack核心包,webpack-cli是命令行工具包,在用命令行执行webpack的时候需要安装。
3.简单测试
创建src文件夹,并且在src文件夹中创建index.html, test1.js, test2.js文件
内容分别如下:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
test2.js
export const name = "dongdong";
test1.js
import { name } from './test2.js'
console.log(name);
接下来我们可以尝试在index.html中引入test1.js,看看是否会打印"dongdong"。
通过谷歌浏览器打开index.html后,在控制台可以看到会报错。
test1.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
这个报错原因是因为浏览器对原始的ES6模块默认引入方式不支持。
接下来我们就来尝试通过webpack将test1.js 和test2.js打包成一个js文件来引入。
在控制台输入
npx webpack src/test1.js -o bundle.js
这条命令会根据引入的顺序将所有的文件都打包到一个文件中。
接下来我们在index.html中引入bundle.js后看看。
刷新浏览器
我们会发现,已经成功的执行了test1.js中的console.log(name)。说明文件打包是没有问题的。
4.webpackp配置
在写好webpack的配置文件后,我们在打包时只需要执行npx webpack命令,就可以直接打包。
现在根目录下建立一个webpack.config.js文件,代码如下:
const path = require('path');
module.exports = {
entry: './src/test1.js', // 打包入口
output: { // 打包出口
path: path.resolve(__dirname, ''),
filename: 'bundle.js' // 打包出来的文件名
},
mode: 'none' // 打包模式
};
在这里,我们可以配置入口和出口,这里我设置的入口就是test1.js文件,出口的路径path为:path.resolve(__dirname, '')表示的其实就是当前文件夹根目录的绝对路径。filename:就是生成的打包文件名称。mode是Webpack的打包模式,默认是'production',表示给生产环境打包的。现在我们设置成'none',这样代码就不会压缩了。
接下来我们执行:
npx webpack
结果:
刷新浏览器,同样可以打印成功。
5.小结
今天主要学习内容:
demo项目建立和安装webpack
打包测试和webpack配置