webpack 小demo
1 安装node.js
2 安装cnpm
3 安装webpack
cnpm install --save-dev webpack
对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更的依赖时，更容易分别升级项目。
安装最新版本的webpack
cnpm install --save-dev webpack@<version>
全局安装
cnpm install --global webpack
4 初始化npm 生成package.json文件
cnpm init
5 设置配置文件webpack.config.js （import 和module.exports不能同时使用 import 可以和exports一起使用 module.exports和require一起使用）
var path = require('path');//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports={
devtool:'eval-source-map',
entry:APP_PATH,
output:{
path:BUILD_PATH,
filename:'main.js'
}
}
项目目录：
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|-main.js
|- /src
|- index.js
|- tool.js
6 定义方法 tool.js
var $=require('jquery'); (安装jquery插件 cnpm install --save-dev jquery)
function demo1(){
console.log('this is function demo1');
}
function demo2(){
console.log('this is function demo2');
}
function demo3(){
console.log($('body'));
}
module.exports={
demo1:demo1,
demo2:demo2
}
6 引入tool.js中的方法 index.js
var demo=require('./tool.js');
demo.demo1();
demo.demo2();
demo.demo3();
7 index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
8 执行构建
8.1 如果没有设置配置文件webpack.config.js需要根据文件的目录自己设置编译的文件以及生成文件 webpack src/index.js dist/bundle.js
8.2 设置了配置文件webpack.config.js 只需要执行webpack就可以了;这条命令会自动引用webpack.config.js文件中的配置选项
运行结果：
8.3 更便捷的执行打包任务
在命令行中输入命令需要代码类似于 node_modules/.bin/webpack 这样的路径其实是很烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行进行配置后可以在命令行中使用简单的npm start命令来替代尚明略微繁琐的命令。在pachage.json中对scripts队形进行相关设置即可，设置方法如下：
"scripts": {
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
},
(试了一下webpack需要全局安装才可以) Webpack的强大功能
生成Sourse Maps（使调试更容易）
devtool:'eval-source-map'//在module.exports中设置 使用webpack构建本地服务器
Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要
单独安装它作为项目依赖
cnpm install --save-dev webpack-dev-sever
实际操作中需要全局安装webpack-dev-server 才可以
修改webpack.config.js,在module.exports中添加配置：
plugins:[
new webapck.HotModuleReplacementPlugin()
],
devServer:{
contentBase:'./dist',
historyApiFallback:true,
inline:true
}
最终webpack.config.js的配置如下：
var path = require('path');
var webpack=require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports={
devtool:'eval-source-map',
entry:APP_PATH,
output:{
path:BUILD_PATH,
filename:'main.js'
},
plugins: [
/*new HtmlwebpackPlugin({
title: 'Hello World app'
}),*///在build目录下自动生成index.html，指定其title
new webpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:'./dist',
historyApiFallback: true,
inline: true
}
}
在终端输入：webpack-dev-server 构建本地服务器并执行热加载
配置script，修改package.json文件
"scripts":{
...
"server":"webpack-dev-server -inline"
}
在终端执行npm run server 就可以了、 如果局部安装webpack 和webpack-dev-server
在终端输入的命令分别是：
node_modules/.bin/webpack
node_modules/.bin/webpack-dev-server
配置script：修改package.json文件
"scripts":{
...
"start":"node_modules/.bin/webpack",
"server":"node_modules/.bin/webpack-dev-server --inline"
}
webpack 小demo的更多相关文章
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- npm安装及webpack打包小demo
node(node.js) 安装 1.先从https://segmentfault.com/a/1190000004245357网站下载x64位的安装包node-v4.8.1-linux-x64.ta ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- SpringBoot-Vue实现增删改查及分页小DEMO
前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- Nancy之基于Nancy.Hosting.Self的小Demo
继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- Nancy之基于Self Hosting的补充小Demo
前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...
- [Unity3D]做个小Demo学习Input.touches
[Unity3D]做个小Demo学习Input.touches 学不如做,下面用一个简单的Demo展示的Input.touches各项字段,有图有真相. 本项目已发布到Github,地址在(https ...
随机推荐
- 【Unity3D自学记录】Unity3D之自制小钟表
今天来写一个小钟表,事实上非常easy,就运用到了欧拉角. 首先创建时钟.分钟.秒钟以及4个点(12点.3点.6点.9点)偷懒了~~没弄那么多点. 时钟.分钟.秒钟这三个父级的中心一定要注意,我们旋转 ...
- Cursor类用法：
Cursor类用法: http://www.2cto.com/kf/201109/103163.html Ctrl+Shift+G 查找类.方法和属性的引用.这是一个非常实用的快捷键,例如 ...
- 后台运行命令：&和nohup command & 以及关闭、查看后台任务
当我们在终端或控制台工作时.可能不希望由于执行一个作业而占住了屏幕,由于可能还有更重要的事情要做,比方阅读电子邮件. 对于密集訪问磁盘的进程,我们更希望它可以在每天的非负荷高峰时间段执行(比如凌晨). ...
- 运维基础-Linux发展史、安装、基本操作
Linux是目前互联网运维.大数据.云计算方向首选操作系统平台,能够在物理服务器Dell.hp.等server,以及当前主流的云平台,阿里云,腾讯云上面部署 发展史 . . .略过..... 物理服务 ...
- PythonCookBook笔记——迭代器与生成器
迭代器与生成器 迭代是Python最强大的功能之一,虽然看起来迭代只是处理序列中元素的一种方法,但不仅仅如此. 手动遍历迭代器 想遍历但不想使用for循环. 使用next()方法并在代码中捕获Stop ...
- 28个jQuery性能优化的建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- mac 权限问题
终端输入sudo chown -R zjtc /usr/local
- EasyRTMP实现RTMP异步直播推送之环形缓冲区设计
本文转自EasyDarwin团队kim的博客:http://blog.csdn.net/jinlong0603 EasyRTMP的推送缓冲区设计 EasyRTMP内部也同样采用的环形缓冲的设计方法,将 ...
- 按照eslint 规范写代码 [eslint] 'flag' is assigned to itself. (no-self-assign)
按照eslint 规范写代码 [eslint] 'flag' is assigned to itself. (no-self-assign)
- react遇到的各种坑
标签里用到<label for>的,for 要写成htmlFor 标签里的class要写成className 组件首字母一定要大写 单标签最后一定要闭合 如果html里要空格转义, 注意不 ...