webpack 练习笔记
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 练习笔记的更多相关文章
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- webpack入门笔记
此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- 学习webpack基础笔记01
学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...
- Webpack学习笔记一:What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- webpack简单笔记
本文简单记录学习webpack3.0的笔记,已备日后查阅.节省查阅文档时间 安装 可以使用npm安装 //全局安装 npm install -g webpack //安装到项目目录 npm insta ...
- webpack 学习笔记
1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script ...
- webpack学习笔记--安装
1 首先要安装node Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持 2 npm install webpack -g 通常我们会将 Webp ...
- webpack使用笔记
webpack简介 CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等适用于前端.np ...
随机推荐
- 【转】C语言正确使用extern关键字
利用关键字extern,可以在一个文件中引用另一个文件中定义的变量或者函数,下面就结合具体的实例,分类说明一下. 一.引用同一个文件中的变量 #include<stdio.h> int f ...
- mysql主从配置 转自http://www.cnblogs.com/sustudy/p/4174189.html
1.确保主数据库与从数据库一模一样. 例如:主数据库里的a的数据库里有b,c,d表,那从数据库里的就应该有一个模子刻出来的a的数据库和b,c,d表 2.在主数据库上创建同步账号. GRANT REPL ...
- 006_ssl监测及评分
https://testssl.sh/ 一. https://www.ssllabs.com/ssltest/analyze.html?d=jyall.com 监测下jyll.com,不忍直视啊! 二 ...
- 16-client、offset、scroll系列
1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- LeetCode(27): 移除元素
Easy! 题目描述: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1 ...
- python----多继承C3算法
https://blog.csdn.net/fmblzf/article/details/52512145
- jquery----ajax解决scrf问题
前端ajax请求 $.ajax({ type:"PUT", //请求方式为put dataType:"JSON", url:'/updata/user/', d ...
- hdu3255扫描线:带权面积交转体积交
手贱把i打成j,调了半天 /* 面积并转体积并,长方体高度为作物价格 算体积并:在笛卡尔坐标系的y轴上建立线段树cnt记录区间被完全覆盖的次数,sum记录区间被覆盖的总长度 以平行于xoy的平面从下往 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- ireport 添加行自增序号
ireport 添加行自增序号 在ireport报表中加入行的自增序号方法: 添加一个变量,如变量名为 index: 设置变量类型为Integer,计算类型为count:变量表达式为$V{index} ...