webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX javascript xml）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

文档地址：http://webpack.github.io/docs/

使用loader转换文件

记住三点，入口(entry)，出口(output)，规则(loader)

规则就是用相应的loader模块打包相应的文件。

特点

  1. webpack 是以 commonJS 的形式来书写脚本的，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

    AMD[Asynchromous Module Definition]:RequireJS 在推广过程中对模块定义的规范化产出。

    CMD[Common Module defined]:SeaJS 在推广过程中对模块定义的规范化产出。

    CommonJS规范

    作用：让js不仅可以运行在浏览器端，还可以运行在服务器端。

    CommonJS定义的模块分为:

    {模块引用(require)} ->require()用来引入外部模块

    {模块导出(exports)}->exports对象用于导出当前模块的方法或变量，唯一的导出口

    {模块标识(module)} defined ->module对象就代表模块本身

  2. 能被模块化的不仅仅是 JS 了。png coffee less&sass

  3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

  4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮

安装及使用

  • 安装

    1. mkdir course-webpack(不要大写P)
    2. cd course-webpack
    3. npm init
    4. 全局安装cnpm i webpack@3.8.1 -g (3.8.1版本的稳定)
    5. 开发依赖cnpm i webpack@3.8.1 -D
    6. 安装css项目打包

  • 使用

    1. cnpm i css-loader style-loader -D安装支持css的打包坏境

      require('style!css!./style.css')style与css的位置不能变

    2. cnpm i sass-loader node-sass -D

      文件名后缀为.scss

    3. cnpm i less less-loader -D

      文件名后缀为.less

    4. 最后使用命令webpack ***.*** bundle.js将把暴露出来的各种文件打包到bundle.js里

      bundle： 捆; 包袱; 捆绑w

配置

  1. 新建webpack.config.js文件（webpack配置文件）。写入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    // webpack 配置文件
    // 入口 entry
    // 出口  output
    // 规则  loader   module
    // 插件  plugins

    // js css/scss/less  png vue
    module.exports = {
      entry: "./entry.js",
      output: {
        filename: "bundle.js",
        path: __dirname //双下划线
      },
      module: {
        rules: [{
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }, {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
          test: /\.less$/,
          use: ['style-loader', 'css-loader', 'less-loader']
        }, {
          test: /\.js$/,
          exclude: /node_modules/, // 不会去 node_modules 搜索 打包文件
          use: [
            "babel-loader"
          ]
        }]
      },
      devtool: "source-map", // 方便开发者调试
    }

  2. 配置规则(js可能需要配置es6，有的浏览器不识别es6语法)

    1. cnpm i babel-loader@7.1.5 babel-core@6.26.3 babel-preset-env -D

    2. 新建.babelrc 填写：

      1
      2
      3
      {
          "presets":["env"]
      }

    3. 配置规则在webpack.config.js写入.js的配置规则（上面已写）

  3. 热替换

    1. cnpm i webpack-dev-server@2.9.3 -g
    2. cnpm i webpack-dev-server@2.9.3 -D
    3. 在packjson中添加"start":"webpack-dev-server --inline --hot --open"

  4. 下载source-map

    下载后配置 devtool: "source-map", // 方便开发者调试

webpack内各种文件的书写

  1. .css文件

    1
    2
    3
    4
    5
    6
    7
    8
    body{
        background: darkgreen;
        color:#fff;
    }
    div{
        border:4px solid darkorange;
        font-size:60px;
    }

  2. .scss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $base_color:yellow;
    body{
        background: $base_color;
        color:blue;
        div{
            border:4px solid darkorange;
            font-size:60px;
        }
    }

  3. .less

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @base_color:yellowgreen;
    body{
        background: @base_color;
        color:#fff;
        div{
            border:4px solid darkorange;
            font-size:60px;
        }
    }

  4. .js（下面包含部分es6)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const arr = ["vue","react","angular4.0"];
    let word = "天道酬勤!!!"

    // 1. 解构导出
    exports.arr = arr;

    exports.word = word;

    // module.exports = "hello everyone";

    // js文件 无需打包  本身就是模块

    // 模块导出
    // module.exports = {}
    // exports.a = a;

  5. 入口文件entry.js(需新建)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    console.log("这是 入口文件 ...");
    //  ./ 表示同级文件  ../  上一级文件  __dirname
    // var {arr,word} = require("./name");
    import {arr,word} from "./name";


    // import obj from "./es6";
    // console.log(obj);

    import {msg,hello} from "./es6";

    document.getElementById("app").innerHTML += "hello - webpack"  +  word  + arr[0] + "<h2>"+msg+"</h2>" + hello;

    // require("style-loader!css-loader!./style.css");

    // require("style-loader!css-loader!sass-loader!./demo.scss");

    // require("style-loader!css-loader!less-loader!./index.less");

    // require("./style.css");
    // require("./demo.scss");
    // require("./index.less");
    import "./demo.scss";

  6. 出口文件webpack编译后bundle.js（需新建）

    1
    2
    console.log("这是 入口文件 ...");
    ...

  7. index.html文件引入

    1
    <script src="bundle.js"></script>