安装

1. 全局安装命令：cnpm install weback -g

2. 安装webpack-cli：

cnpm install -D webpack-cli

webpack-cli 是用来在控制台运行webpack命令的工具

传概念

使用

新建demo01 文件夹，并在该文件文件夹下面创建app和public两个文件夹，和webpack.config.js

如下：

2.生成package.json文件：cmd 进入到demo01文件夹

执行：cnpm init，回答一些问题之后

生成package.json 这个是一个最为进本的文件

app 文件夹下面创建两个js文件，分别为entry.js 和greet.js

greet.js

function greet(){var divEle=document.createElement("div");divEle.innerHTML="hello,webpack";return divEle;
}
module.exports=greet;

entry.js

var greet=require("./greet.js");
document.getElementById("container").appendChild(greet());

public 文件夹下面创建index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="container"></div><script type="text/javascript" rel="stylesheet" src="./bundle.js"></script></body>
</html>

webpack.config.js 文件内容如下：

module.exports={entry:__dirname+"/app/entry.js",   //入口文件output:{                           path:__dirname+"/public",      //输出文件的存放位置filename:"bundle.js"           //输出文件的名称}
}

执行webpack：

public 文件夹下面生成bundle.js

浏览器打开index.html

希望对你有所帮助

原文地址：

https://zhuanlan.zhihu.com/p/23538138

webpack 安装使用（1）相关推荐

webpack 安装卸载
webpack安装: npm install webpack -g //-g 全局npm install webpack -s //-s 局部 npn install webpack@x.xx -g ...
【JavaScript】 Webpack安装及文件打包
背景最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
Webpack安装及打包js、css文件示例
什么是Webpack Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.Webpack 可以将多种静态资源 js.css ...
webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
webpack 安装vue（两种代码模式compiler 和runtime）
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...
Webpack 安装
本节我们来学习 webpack4.0 的安装,webpack 的运行需要依赖 Node.js 的运行环境,在安装 webpack 时也需要用到 npm ,所以我们需要先安装 Node.js,Node. ...
webpack安装使用教程
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...
webpack安装与使用（详细）
一.什么是webpack? webpack是现代javascript应用程序的静态模块打包器,当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中 ...
webpack安装 webpack-dev-server后运行报错
webpack安装 webpack-dev-server后进行实时监听报错 webpack安装插件 webpack-dev-server后进行实时监听,重新运行npm run dev报错一.问题现象 ...
webpack安装教程及webpack-dev-server
znwebpack安装教程_彳亍的博客-CSDN博客_webpack安装教程 webpack\webpack-cli上方文章写的非常好了,直接按步骤来就行,也可以通过cnpm安装(把np ...

webpack 安装使用（1）

安装

使用

webpack 安装使用（1）相关推荐

最新文章

热门文章