webpack学习笔记1

# 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：命令提示行