Webpack

什么叫webpack

  1. javaScript模块的引入一直是js编程人员一直头疼的问题,很AMD/CMD标准，具体参见<JavaScript富应用开发>一书第六章依赖管理。
  2. Webpack是一款用户打包前端模块的工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等
  3. Webpack的优点：
  • 按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新
  • webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
  • 能被模块化的不仅仅是 JS 了，能处理各种类型的资源。
  • 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
  • 扩展性强，插件机制完善。

webpack之安装

  1. 全局安装
    npm install webpack -g

  2. 局部安装

    1
    2
    3
    npm install --save-dev webpack

    npm install --save-dev webpack@<version><!--more-->

    webpack之配置文件的学习

    通过在根目录下面建立webpack.config.js文件,然后在该文件下建立配置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var path = require('path');

    module.exports = {
      entry: './app/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

    然后执行该程序;

    1
    webpack webpack.config.js

    webpack之loader

  3. loader介绍

webpack本身不支持css,less,sass,js,image等相关资源的打包工作,它仅仅提供一个基础的框架，在这个框架上借助相关的loader才可以实现相关资料的打包。

  1. loader打包css(css-loader以及style-loader)
  • 安装
    1
    npm install --save-dev css-loader style-loader
  • 配置webpack.config.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module.exports = {
        module: {
            // rules 可用loaders代替
            rules: [{
                test: /\.css$/,
                // 1.0 版本中loader:'style-loader!css-loader',这里的！用来间隔多个loader;
                use: [ 'style-loader', 'css-loader' ]
            }]
        }
    }
    注意：按照上面的方法加载css,有一个缺点就是无法利用浏览器的异步加载和并行加载CSS的能力。相反，您的页面将不得不等待，直到您的整个JavaScript包被加载。webpack可以利用ExtractTextWebpackPlugin解决这个问题
  • 使用ExtractTextWebpackPlugin

安装：

1
npm install --save-dev extract-text-webpack-plugin

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    module: {
         rules: [{
             test: /\.css$/,
             use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
         }]
     },
   plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
}
  1. loader打包sass文件(node-sass sass-loader style-loader)
  • 安装：
    1
    npm install node-sass sass-loader style-loader --save-dev
  • 配置：
    1
    2
    3
    4
    5
    6
    module:{
        loaders:[{
             test:/\.scss$/,
             use:['style-loader','css-loader',"sass-loader"]     
        }]
    }
  • 使用extract-text-webpack-plugin将sass文件分离出来,安装同前面一样
    配置：
    1
    2
    3
    4
    5
    6
    7
    8
    {
        loaders:{
                test:/\.scss$/,
                use:ExtractTextPlugin.extract({
                     use: ['css-loader,sass-loader']
                })     
            }
    }
    注意：ExtractTextPlugin.extract 第二个参数(或拆分为多个参数)中 loader 的执行顺序是从右到左，即先对引入的 .sass 使用 sass-loader 得到编译后的 css 再使用 css-loader 按照正常 css-loader 的方式处理。
  1. loader打包less文件(less-loader,less,css-loader)
  • 安装：
    1
    npm install less-loader less css-loader --save-dev
  • 配置
    1
    2
    3
    4
    5
    6
    7
    8
    {
        loaders:{
                test:/\.less$/,
                use:ExtractTextPlugin.extract({
                     use: ['css-loader,less-loader']
                })     
            }
    }
  1. loader打包url请求的资源(url-loader,file-loader)
  • 安装:
    1
    npm install url-loader file-loader --save-dev
  • 配置
    1
    2
    3
    4
    5
     {
               test:/\.(png|gif|ttf)$/,
               //limit 后面表示限制的B字节 如果超过这个限制就会以文件的方式引入
               use: "url-loader?limit=20000"
    }

webpack之Webpack-dev-server

  1. 什么是webpack-dev-server
    webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。

  2. 安装

    1
    npm install html-webpack-plugin web-dev-server --save-dev

  3. 修改pagejson

    1
    2
    3
    "scripts": {
      "dev": "webpack-dev-server --hot --inline --open --port 5008"
    },

  4. 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let htmlWp = require("html-webpack-plugin");
     plugins:[
            new htmlWp({
                title:"测试",
                //保存在内存中的文件名称
                filename:"index.html",
                //生成的文件名称已该文件生成
                template:"index1.html"
            })
        ]

webpack之babel()

  1. 安装

    1
    npm install babel-core babel-preset-es2015 babel-loader --save-dev

  2. 配置babelrc.

    1
    { "presets": [ "es2015" ] }

    注意：webpack1.0是配置webpack.config.js

    1
    2
    3
    babel:{
         { "presets": [ "es2015" ] }
    }

  3. 修改webpack.config.js以使用babel-loader来处理所有.js文件。

1
2
3
4
5
6
{
            test:/\.js$/,
            use:["babel-loader"],
            //防止node——modules里面js文件也被转换include属性值表示需要转换的文件
            exclude:/node_modules/
}