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 ...

随机推荐

c++程序猿经典面试题（2）
1.以下程序的输出结果是? #include<stdio.h> main(){ int b=3; int arr[]={6,7,8,9,10}; int *ptr=arr; *(ptr++ ...
css控制打印时只显示指定区域
CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...
轻松搞定RabbitMQ（三）——消息应答与消息持久化
转自 http://blog.csdn.net/xiaoxian8023/article/details/48710653 这个官网的第二个例子中的消息应答和消息持久化部分.我把它摘出来作为单独的一块 ...
selector模块使用
#服务端 from socket import * import selectors sel=selectors.DefaultSelector() def accept(server_fileobj ...
Mataplotlib绘图和可视化
Mataplotlib是一个强大的python绘图和数据可视化工具包安装方法:pip install matplotlib 引用方法:import matplotlib.pyplot as plt ...
C# 之集合ArrayList
.NET Framework提供了用于数据存储和检索的专用类,这些类统称集合. 这些类提供对堆栈.队列.列表和哈希表的支持.大多数集合类实现系统的接口.以下我们主要来讲一下ArrayList. ...
mysql "ON DUPLICATE KEY UPDATE" 语法
如果在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值,则在出现重复值的行执行UPDATE:如果不 ...
MAC如何查看某个端口的占用情况
执行如下命令: lsof -i tcp:8080 #8080为查询的端口号会展示该端口的使用情况,然后kill -9 PID的值即可关闭该端口
服务器启动时Webapp的web.xml中配置的加载顺序(转载）
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
C++ 中的几种初始化
前言阅读C++教材时,想必你听过复制初始化,直接初始化,值初始化这三个概念吧.笔者本人常将其混淆,遂在此记录下它们的具体含义以便日后查阅. 复制初始化( copy-initialization ) ...

webpack 小demo

webpack 小demo的更多相关文章

随机推荐

热门专题