Webpack2的基本使用

安装Webpack2

npm install -g webpack

也可以通过yarn来安装

创建文件index.js

import _ from 'lodash';function component () {var element = document.createElement('div');/* lodash is required for the next line to work */
    element.innerHTML = _.join(['Hello','webpack'], ' ');return element;
}document.body.appendChild(component());

创建文件index.html

<!DOCTYPE html>
<html>
<head><title>webpack 2 demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>

通过npm init创建package.json文件

安装lodash

npm install --save lodash

创建webpack的配置文件webpack.config.js

var path = require('path');module.exports = {entry: './app/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}
};

最终目录结构

运行webpack

下次介绍loader和plugin的使用。

参考资料

webpack1

http://webpack.github.io/docs/tutorials/getting-started/

webpack2

https://webpack.js.org/

Webpack2的基本使用相关推荐

推荐:Webpack2入门到深入的中文文档
2019独角兽企业重金招聘Python工程师标准>>> 最近看了一本不错的<<webpack2中文文档>>的PDF,对比于wepack2官网(https:// ...
webpack2诸类事宜
写在最前:webpack的总结也是自己坑过,实践过但是也是针对性的使用,在加上webpack的背景,对于其'原理'方面有很大的不正确的理解,有错误的地方,请尽情指出(乖巧~) 由于版本遇到的问题: 在 ...
vue2+webpack2实现饿了么移动端商家页面
这是一个基于Vue全家桶实现的饿了么移动端webapp 项目github地址:https://github.com/JerryYgh/m... 如果觉得对您有帮助,您可以在github上给我个star ...
使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番关于webpack2.0和1.x的区别概括起来就是tree shaki ...
webpack2 实践
在CMD生成默认package.json文件: 1 npm init -y 基础安装包: 1 autoprefixer 2 babel-core babel-loader 3 babel-preset ...
最新 react 开发框架（webpack2、react15、react-router4、antd-mobile）
react-molin react-molin是一个全新的基于webpack2.react15.react-router4.antd-mobile的前端架构实现方案(h5) react-molin的优 ...
webpack 图片压缩不起作用_理论｜webpack2 终极优化
webpack是当下最流行的js打包工具,这得益于网页应用日益复杂和js模块化的流行.webpack2增加了一些新特性也到了预发布阶段,是时候告诉大家如何用webpack2优化你的构建让它构建出更小的 ...
vue cli 脚手架上多页面开发支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: h ...
webpack2入门概念
webpack是一种JavaScript应用模块化打包工具,它配置起来简单易上手,因此很多企业工程化代码都使用它来打包.在具体介绍如何使用webpack之前,先来介绍下webpack的四个核心概念. ...

Webpack2的基本使用

Webpack2的基本使用相关推荐

最新文章

热门文章