亲宝软件园·资讯

展开

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

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>

 

加载全部内容

相关教程
猜你喜欢
用户评论