1, 创建项目 webpack

mkdir webpack

2, 初始化项目

npm init

3, 全局安装webpack

npm install webpack -g

4, 使用

// 创建静态文件
echo "静态html文件 引入打包后的bundle.js" >index.tml
//JS入口文件
echo "document.write('It work')" >entry.js // 使用webpack 打包

5, 增加一个模块 module.js

entry.js 中的代码,其它模块会在运行 require 的时候再执行

6, loader  【Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。】

//创建style.css文件
echo "background:red;" >style.css
//entry.js 入口文件引入 style.js
require("!style!css!./style.css")
// 安装css-loader
npm install css-loader --save-dev
// 安装style-loader 【用css-loader解析css 然后用style-loader 加到index.html 中】
npm install style-loader --save-dev

7,配置文件 【webpack.config.js】

//添加webpack.config.js文件
echo "">webpack.config.js

创建配置项

var webpack = require('webpack')

module.exports = {
//入口文件
entry: './entry.js',
// 输出文件
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' }
]
}
}

另外style.css 引入方式

// entry.js
require("./style.css")

执行 webpack

8,  插件

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。

引入方式

var webpack = require('webpack')

module.exports = {
//入口文件
entry: './entry.js',
// 输出文件
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' }
]
},//插件项
plugins: [
new webpack.BannerPlugin('This file is created by lpt')
]
}

9,开发环境

当然,使用 webpack-dev-server 开发服务是一个更好的选择。

它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/  可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面

// 显示进度
webpack --progress --colors
//不想没次改动代码都重新编译一次文件 添加监听
webpack --progress --colors --watch

使用webpack-dev-server

// 安装webpack-dev-server
npm install webpack-save-dev
//运行
webpack-dev-server --progress --color
//访问
localhost:8080

使用webpack-dev-server 热更新

webpack-dev-server --inline --hot

webpack 练习笔记的更多相关文章

  1. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  2. webpack入门笔记

    此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html

  3. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  4. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  5. Webpack学习笔记一:What is webpack

      #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...

  6. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  7. webpack简单笔记

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

  8. webpack 学习笔记

    1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script ...

  9. webpack学习笔记--安装

    1 首先要安装node  Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持 2 npm install webpack -g 通常我们会将 Webp ...

  10. webpack使用笔记

    webpack简介 CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等适用于前端.np ...

随机推荐

  1. [转]VS2015 Git 源码管理工具简单入门

    VS2015 Git 源码管理工具简单入门   1.VS Git插件 1.1 环境 VS2015+GitLab 1.2 Git操作过程图解 1.3 常见名词解释 拉取(Pull):将远程版本库合并到本 ...

  2. 重装windows系统后配置Anaconda

    给电脑换了系统,十分担心anaconda需要重装.还好以下方法完美解决.(同是win10 64位) 原始anaconda安装路径:D:\ProgramData\Anaconda3  (不能有空格哦) ...

  3. 瞅瞅!!免费看VIP视频的技巧

    最近再逛强大的知乎,发现一个免费看VIP视频的方法(腾讯是可能有点不稳定) 以爱奇艺为例: 复制URL到www.a6a6.org 把地址输入到输入框,点击开始 然后会提示你输入提取码 输入:22336 ...

  4. jquery之源码

    1.插件扩展机制 所有的Jquery代理对象的实例,都是扩展自$.fn对象的 意味着只要我们继续扩展$.fn这个对象的功能,就相当于扩展了所有的Jquery代理对象的实例的功能 代码 var $bod ...

  5. 将数据库从Oracle迁移到SQL Server

    参考链接:http://www.360doc.com/content/15/0310/14/9260775_454038517.shtml

  6. Oracle ____Undo

    什么是回滚和撤销 update emp set sal=4000 where empno=7788 语句执行过程 1 检查empno=7788记录是否在buffer cache ,如果不存在,则读取到 ...

  7. 根据条件返回相应值 decode(条件,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值)

    decode(条件,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值) [功能]根据条件返回相应值 [参数]c1, c2, ...,cn,字符型/数值型/日期型,必须类型相同或null 注 ...

  8. Fiddler抓包5-接口测试(Composer)

    前言 Fiddler最大的优势在于抓包,我们大部分使用的功能也在抓包的功能上,fiddler做接口测试也是非常方便的. 对应没有接口测试文档的时候,可以直接抓完包后,copy请求参数,修改下就可以了. ...

  9. [转] SSO单点登录原理和流程分析

    WEB的登录那些事#### 说道账户登录和注册,其实我们每天都在亲身感受着,像微博.知乎还有简书等等.我们总是需要定期的去重新登录一下,对于这种认证机制,我们都能说出来两个名词,Cookie.Sess ...

  10. 《Java程序性能优化》之设计优化

    豆瓣读书:http://book.douban.com/subject/19969386/ 第一章 Java性能调优概述 1.性能的参考指标 执行时间: CPU时间: 内存分配: 磁盘吞吐量: 网络吞 ...