# 1.新建项目文件夹
mkdir webpack-demo
# 2.创建一个package.json文件
使用npm init 初始化 ,name:项目名 其他的直接enter 最后输入yes
# 3.安装webpack
npm install webpack -g --sav—dev —save—dev 会保存安装的module在 package.json的devDependencies 里面
# 4.安装babel
npm install --save-dev babel-core babel-preset-es2015
根目录下新建.babelrc文件,内容:
{
"presets":["es2015"], //设置预编译的语言,转码成es5
"plugins": []
}
## 使用:
1. 新建es6.js
let c = "333 ddworld!";
document.getElementById("welcome").innerHTML = c;
2. 使用命令babel es6.js ,会输出已经编译的es5代码:
var c = "333 ddworld!";
document.getElementById("welcome").innerHTML = c;
1).使用命令 babel es6.js --out-file es5.js会将编译生成的es5代码保存到一个指定的文件
也可以将 --out-file简写成 -o的形式,则上述命令为:babel es6.js -o es5.js
2).为了不每次修改,都要运行一遍babel命令,也可以使用watch监 听文件的变化: babel --watch es6.js -o es5.js
注:以上是对单个文件的编译,也可以将整个目录作为bebel编译参数
3.babel -node es6start.js可以输出执行结果到控制台,
但是测试结果可能提示unknown option -n ,此时说明node可能已经开始支持es6 ,那么直接食用node es6.js
# 5.安装browser模块,此模块可以在浏览器端启动一个服务
npm install -g browser-sync --save-dev
## 使用:
1. 使用命令browser-sync start --server 在浏览器端启动一个服务
2. browser-sync start --server -f js/*.js 启动一个服务并监听js文件夹下的所有的js文件
# 6.安装browserify 模块,此模块针对commonjs进行整合混淆
npm install -g browserify --save-dev
## 使用:
1.browserify commonjs/index.js > index.js,将commonjs目录下的index.js编译输出到根目录下的index.js文件
--------------------------------------------------------------
以上babel预编译,babel变化的监听,浏览器端监听的命令可以写成以下形式,运行时只运行 npm build就可以了一次性运行三个命令了
"build": "npm run build:babel&&npm run build:watch&&npm run build:server",
"build:babel":"babel js/es6.js -o js/es5.js",
"build:watch":"babel --watch js/es6.js -o js/es5.js",
"build:server":"browser-sync start --server -f js/es5.js"
--------------------------------------------------------------
# 7.安装less,
npm install -g less --save-dev
## 使用:
1.新建文件夹css
2.css文件夹中新建文件basic.less,内容:
@masterColor: #ff7799;
@masterColor-border:lighten(@masterColor,20%);
@padding-sm:10px;
@ns:~'wos';
3.css文件夹中新建文件layout.less,内容:
body{
background-color: @masterColor;
header{
width:100%;
height:200px;
border:1px solid @masterColor-border;
li{
float:left;
padding:@padding-sm;
}
@{ns}-color{
color: @masterColor;
}
}
}
4.css文件夹中新建index.less,内容:
@import "./basic.less";
@import "./layout.less";
5.使用lessc css/index.less index.css 将css文件夹下的index.less编译输出到根目录下的index.css文件中
# 8.安装less clean插件,对less编译后的文件压缩
npm install -g less-plugin-clean-css --save-dev
## 使用:
直接在lessc命令后面添加--clean-css='advanced'即可
lessc css/index.less index.css --clean-css='advanced'
# 9.安装 uglifyjs ,
npm install -g uglifyjs --save-dev
## 使用:
uglifyjs 不能像less clean插件一样直接把参数跟在编译命令的后面,而是只能压缩现有的文件
如配合上面的browserify使用,
1.使用browserify ./commonjs/index.js > index.js 先输出整合混淆的js
2.再对整合混淆后的js进行压缩 uglifyjs index.js -o index.min.js
3.也可以在-o前面添加-m(混淆),先混淆再压缩uglifyjs index.js -m -o index.min.js
# 10.安装smushit 可以对图片进行压缩
npm install -g node-smushit --save-dev
## 使用
smushit img (压缩img目录下的所有文件)
# 11.安装tinify ,对图片进行压缩
npm install tinify -g
## 使用
tinify img
# 12.安装base64-css 将css文件中的图片路径的图片转换为base64编码并用base64编码替换掉图片的路径
npm install base64-css 只能本地安装
## 使用:
只本地安装的包,命令使用: node node_modules/base64-css/bin/cli.js -f index.css
node node_modules/base64-css/bin/cli.js找到命令行 cli:命令提示行
mkdir webpack-demo
# 2.创建一个package.json文件
使用npm init 初始化 ,name:项目名 其他的直接enter 最后输入yes
# 3.安装webpack
npm install webpack -g --sav—dev —save—dev 会保存安装的module在 package.json的devDependencies 里面
# 4.安装babel
npm install --save-dev babel-core babel-preset-es2015
根目录下新建.babelrc文件,内容:
{
"presets":["es2015"], //设置预编译的语言,转码成es5
"plugins": []
}
## 使用:
1. 新建es6.js
let c = "333 ddworld!";
document.getElementById("welcome").innerHTML = c;
2. 使用命令babel es6.js ,会输出已经编译的es5代码:
var c = "333 ddworld!";
document.getElementById("welcome").innerHTML = c;
1).使用命令 babel es6.js --out-file es5.js会将编译生成的es5代码保存到一个指定的文件
也可以将 --out-file简写成 -o的形式,则上述命令为:babel es6.js -o es5.js
2).为了不每次修改,都要运行一遍babel命令,也可以使用watch监 听文件的变化: babel --watch es6.js -o es5.js
注:以上是对单个文件的编译,也可以将整个目录作为bebel编译参数
3.babel -node es6start.js可以输出执行结果到控制台,
但是测试结果可能提示unknown option -n ,此时说明node可能已经开始支持es6 ,那么直接食用node es6.js
# 5.安装browser模块,此模块可以在浏览器端启动一个服务
npm install -g browser-sync --save-dev
## 使用:
1. 使用命令browser-sync start --server 在浏览器端启动一个服务
2. browser-sync start --server -f js/*.js 启动一个服务并监听js文件夹下的所有的js文件
# 6.安装browserify 模块,此模块针对commonjs进行整合混淆
npm install -g browserify --save-dev
## 使用:
1.browserify commonjs/index.js > index.js,将commonjs目录下的index.js编译输出到根目录下的index.js文件
--------------------------------------------------------------
以上babel预编译,babel变化的监听,浏览器端监听的命令可以写成以下形式,运行时只运行 npm build就可以了一次性运行三个命令了
"build": "npm run build:babel&&npm run build:watch&&npm run build:server",
"build:babel":"babel js/es6.js -o js/es5.js",
"build:watch":"babel --watch js/es6.js -o js/es5.js",
"build:server":"browser-sync start --server -f js/es5.js"
--------------------------------------------------------------
# 7.安装less,
npm install -g less --save-dev
## 使用:
1.新建文件夹css
2.css文件夹中新建文件basic.less,内容:
@masterColor: #ff7799;
@masterColor-border:lighten(@masterColor,20%);
@padding-sm:10px;
@ns:~'wos';
3.css文件夹中新建文件layout.less,内容:
body{
background-color: @masterColor;
header{
width:100%;
height:200px;
border:1px solid @masterColor-border;
li{
float:left;
padding:@padding-sm;
}
@{ns}-color{
color: @masterColor;
}
}
}
4.css文件夹中新建index.less,内容:
@import "./basic.less";
@import "./layout.less";
5.使用lessc css/index.less index.css 将css文件夹下的index.less编译输出到根目录下的index.css文件中
# 8.安装less clean插件,对less编译后的文件压缩
npm install -g less-plugin-clean-css --save-dev
## 使用:
直接在lessc命令后面添加--clean-css='advanced'即可
lessc css/index.less index.css --clean-css='advanced'
# 9.安装 uglifyjs ,
npm install -g uglifyjs --save-dev
## 使用:
uglifyjs 不能像less clean插件一样直接把参数跟在编译命令的后面,而是只能压缩现有的文件
如配合上面的browserify使用,
1.使用browserify ./commonjs/index.js > index.js 先输出整合混淆的js
2.再对整合混淆后的js进行压缩 uglifyjs index.js -o index.min.js
3.也可以在-o前面添加-m(混淆),先混淆再压缩uglifyjs index.js -m -o index.min.js
# 10.安装smushit 可以对图片进行压缩
npm install -g node-smushit --save-dev
## 使用
smushit img (压缩img目录下的所有文件)
# 11.安装tinify ,对图片进行压缩
npm install tinify -g
## 使用
tinify img
# 12.安装base64-css 将css文件中的图片路径的图片转换为base64编码并用base64编码替换掉图片的路径
npm install base64-css 只能本地安装
## 使用:
只本地安装的包,命令使用: node node_modules/base64-css/bin/cli.js -f index.css
node node_modules/base64-css/bin/cli.js找到命令行 cli:命令提示行