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. 【转】C语言正确使用extern关键字

    利用关键字extern,可以在一个文件中引用另一个文件中定义的变量或者函数,下面就结合具体的实例,分类说明一下. 一.引用同一个文件中的变量 #include<stdio.h> int f ...

  2. mysql主从配置 转自http://www.cnblogs.com/sustudy/p/4174189.html

    1.确保主数据库与从数据库一模一样. 例如:主数据库里的a的数据库里有b,c,d表,那从数据库里的就应该有一个模子刻出来的a的数据库和b,c,d表 2.在主数据库上创建同步账号. GRANT REPL ...

  3. 006_ssl监测及评分

    https://testssl.sh/ 一. https://www.ssllabs.com/ssltest/analyze.html?d=jyall.com 监测下jyll.com,不忍直视啊! 二 ...

  4. 16-client、offset、scroll系列

    1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. LeetCode(27): 移除元素

    Easy! 题目描述: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1 ...

  6. python----多继承C3算法

    https://blog.csdn.net/fmblzf/article/details/52512145

  7. jquery----ajax解决scrf问题

    前端ajax请求 $.ajax({ type:"PUT", //请求方式为put dataType:"JSON", url:'/updata/user/', d ...

  8. hdu3255扫描线:带权面积交转体积交

    手贱把i打成j,调了半天 /* 面积并转体积并,长方体高度为作物价格 算体积并:在笛卡尔坐标系的y轴上建立线段树cnt记录区间被完全覆盖的次数,sum记录区间被覆盖的总长度 以平行于xoy的平面从下往 ...

  9. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  10. ireport 添加行自增序号

    ireport 添加行自增序号 在ireport报表中加入行的自增序号方法: 添加一个变量,如变量名为 index: 设置变量类型为Integer,计算类型为count:变量表达式为$V{index} ...