webpack构建工具初始化并运行简单的demo

时间:2020-01-27 bobo2404 人气:0

webpack官网：https://webpack.js.org/

webpack是构建工具

安装webpack的前提：node,npm要安装

初始化项目

首先是初始化项目，创建一个文件夹，并且进入文件夹使用npm init进行初始化

mkdir q_webpack  //创建q_webpack文件夹
cd q_webpack  //进入该文件夹
npm init -y  //创建package.json,必须要有这个才能安装模块
npm install webpack --save-dev
npm install webpack-cli --save-dev  //4.x版本及以上要安装webpack-cli
上面两条命令可简写
npm install webpack webpack-cli -D

安装完后生成一下内容

输入webpack -v 正常情况下可以看到版本

如果提示

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:....

解决方法：npm install --save-dev webpack-cli -g

创建src目录

cd q_webpack

mkdir src

创建index.html 和 webpack.config.js文件

touch index.html webpack.config.js

进入src目录，创建main.js show.js

cd src

touch main.js show.js

//index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="box"></div>
</body>

</html>

//show.js
const show = content => {
    const box = document.getElementById('box');
    box.innerHTML = `你好! ${content}`
};

export { show };

//main.js
import { show } from './show';

show('kaivon');

//webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'boundle.js'
    }
}

在控制台输入命令webpack,生成 boundle.js

在index.html里引入 boundle.js

//index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="box"></div>
    <script src="dist/boundle.js"></script>
</body>

</html>

加载全部内容