阅读《深入浅出的webpack》：入门
一、安装webpack
【要确保系统需安装5.0.0及以上版本的node.js】
1、安装webpack到本地项目：
安装Webpack到本项目时，可根据自己的需求选择以下任意命令运行：
# npm i -D 是npm install --save-dev的简写，是指安装并保存到package.json的devDependencies
# 安装最新的稳定版
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新的体验版本
npm i -D webpack@beta
安装完成后，我们可以通过一下途径运行安装到本项目的Webpack：
a. 在项目根目录下对应的命令行里通过node_modules/.bin/webpack运行Webpack的可执行文
件。
b. 在Npm Script里定义的任务会优先使用本项目下的webpack，代码如下：
json "scripts":{"start":"webpack--config webpack.config.js"}
2、安装webpack到全局
npm i -g webpack
二、使用webpack
由于Webpack构建运行在Node.js环境下，所以该文件最后需要通过CommonJS规范导出一个描述如何构建的
Object对象。
此时，项目目录如下：
index.html main.js show.js webpack.config.js
使用示例：
1）页面入口文件index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app"></div>
<!--导入webpack输出的javascript文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
2）存放工具函数的show.js文件的内容：
// 操作DOM元素，将content显示到网页上
function show(content){
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过CommonJS规范导出show函数
module.exports = show;
3）包含执行入口的main.js文件的内容如下：
// 通过CommonJS规范导入show函数
const show = require('./show.js')
// 执行show函数
show('Webpack');
最低0.47元/天 解锁文章
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
