1 首先npm init 建立package.json文件  npm init

2 然后全局安装webpack                      npm install webpack -g

3 在项目下安装webpack                      npm install webpack --save-dev

4 安装依赖模块                                    npm install --save-dev style-loader css-loader   npm url-loader svg-url-loader --save-dev

5 编写webpack.config.js配置

var webpack = require('webpack');

module.exports = {
    entry: __dirname+'/js/entry.js',
    output: {
        path: __dirname+'/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/,loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
            {test: /\.svg/, loader: 'svg-url-loader'}
        ]
    }
};

编写entry.js入口：

require("!style!css!./style.css");

function calc(a,b){

    var plus = require("./plus.js");

    var sum = require("./sum.js");

    return sum(sum(a,b),plus(a,b))

}

document.write("The result is   ");

document.write(calc(2,3));

编写sum.js plus.js css:

function sum(a,b){

    return a+b;

}

module.exports=sum;
function plus(a,b){

    return a+2+b;

}

module.exports=plus;
body{

    background-color: #ffffff;

}

编写html,bundle.js在运行webpack命令会出现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="bundle.js"></script>

</body>

</html>

运行webpack命令后打开index

webpack构建本地服务器实现自动刷新：

npm install --save-dev webpack-dev-server

webpack.config.js中添加配置：

module.exports = {

  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",

  output: {

    path: __dirname + "/public",

    filename: "bundle.js"

  },

  devServer: {

    contentBase: "./public",//本地服务器所加载的页面所在的目录

    historyApiFallback: true,//不跳转

    inline: true//实时刷新

  }

}

package.json的scripts中添加配置：

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "webpack",

    "server": "webpack-dev-server --open"

  },

此时运行npm run server即可在看到刷新

webpack简单使用的更多相关文章

  1. webpack简单原理及用法

    前言 如果你已经对Webpack精通了或者至少一直在工作中使用它,请关闭当前浏览器标签,无视这篇文章. 这篇文章本意是写给我自己看的,作为一篇Cookbook供快速查询和上手用.原因是虽然工作中会涉及 ...

  2. webpack 简单使用

    备注:  使用yarn 结合npm 模块进行简单项目开发 1. 安装 yarn init yarn add webpack --dev yarn global add live-server 2. 添 ...

  3. vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)

    1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...

  4. webpack 简单笔记（一）

    安装部分不介绍了 (一)第一个最简单的demo,单入口,单文件 目录结构: webapck.config.js中代码: 'use strict' const path = require('path' ...

  5. webpack简单笔记

    本文简单记录学习webpack3.0的笔记,已备日后查阅.节省查阅文档时间 安装 可以使用npm安装 //全局安装 npm install -g webpack //安装到项目目录 npm insta ...

  6. webpack 简单配置

    webpack.config.js const path = require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin ...

  7. webpack简单教程

    1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行 ...

  8. webpack简单修改版本号(单页面)

    写了一个js文件,可以尽量最简单的修改版本号 package.json配置: updateV.js放置位置: updateV.js: var fs = require('fs'); //文件读写 va ...

  9. webpack简单的打包体验

    怎么使用webpack 进行打包 需要使用管理员权限进行安装 npm install webpack -g npm install webpack-cli -g 创建站点 mkdir webpack ...

  10. webpack简单学习的入门教程

    前言,如果按照官网的安装办法: npm install webpack -g 安装的是最新版的,然后就莫名其妙的有问题(可以安装,但运行有问题).我是小白,我也不知道具体原因,所以我换成2.5.1版本 ...

随机推荐

  1. AngularJS最佳实践

    1.依赖注入不要用推断式 2.双向绑定的变量设置成$scope下的一个对象的属性 3.多个控制器之间的通信尽量使用service实现,不要使用全局变量或者$rootScope 4.尽量不在控制器中操作 ...

  2. C++的新特性for-each

    C++实验课要求用for each 循环来实现关联容器 map 的输出,一开始完全萌比.查了好久的资料才整理出下面的: C++11新特性之一就是类似java的for each循环: map<in ...

  3. PAT 乙级 1078 / 1084

    题目 PAT 乙级 1078 PAT 乙级 1084 题解 1078和1084这两道题放在一块写,主要是因为这两道题的解法和做题思路非常相似:之前我做这一类题没有一个固定的套路,想到哪写到哪,在某种程 ...

  4. Java poi 导出Excel并下载到客户端

    Maven配置,包含了其他文件格式的依赖,就全贴出来了 <dependency> <groupId>org.apache.poi</groupId> <art ...

  5. GoF23种设计模式之创建型模式之建造者模式

    一.概述 将一个复杂对象的构建与其表示分离开来,使得同样的构建过程可以创建不同的表示. 二.适用性 1.当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式的时候. 2.当构造过程必须允许 ...

  6. Broken robot CodeForces - 24D (概率DP)

    You received as a gift a very clever robot walking on a rectangular board. Unfortunately, you unders ...

  7. L1-043 阅览室 （20 分)

    天梯图书阅览室请你编写一个简单的图书借阅统计程序.当读者借书时,管理员输入书号并按下S键,程序开始计时:当读者还书时,管理员输入书号并按下E键,程序结束计时.书号为不超过1000的正整数.当管理员将0 ...

  8. Selenium与PhantomJS【转】

    爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider) 之间恢宏壮阔的斗争... Day 1 小莫想要某站上所有的电影,写了标准的爬虫(基于HttpCli ...

  9. 批量导出ppt中内嵌的图片

    某个ppt中很多页,然后插入了很多图片,且图片都是被压缩的,看起来非常费劲,所以想着一次性把图片另存为,找了接近一个小时,终于被我找到啦,分享给大家: 1.直接把ppt的后缀修改为rar 2.解压ra ...

  10. Kali 中文家目录改英文目录

    中文版Kali装好之后,家目录会中文显示,不便操作 root@kali:~# ls -l drwxr-xr-x root root .0K 7月 : 公共 drwxr-xr-x root root . ...