小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
webpack入门使用方法及个人总结
  • 首页 > 前端 > 自动构建
  • 作者:小昱
  • 2017年6月19日 21:26 星期一
  • 浏览:204
  • 字号:
  • 评论:0
  • 一、安装

    cnpm install webpack -g

    二、使用

    创建目录结构如下

    mkdir app && cd app
    touch test1.js
    touch test2.js
    touch index.html

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>webpack</title>
        <script src="bundle.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    vim test1.js

    document.write(require("./test2.js"));

    vim test2.js

    module.exports = "It works from test2.js.";

    使用webpack打包

    webpack test1.js bundle.js

    浏览器打开: 

    三、使用配置文件

    使用多个入口文件

    vim webpack.config.js

    module.exports = {
        // 入口文件
        entry: {
            "bundle01": "./main01.js",
            "bundle02": "./main02.js"
        },
        // 输出文件
        output: {
            filename: "[name].js"
        }
    }

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>webpack</title>
        <script src="bundle01.js"></script>
        <script src="bundle02.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    vim test1.js

    document.write("<h1>Hello webpack</h1>");

    vim test2.js

    document.write("<p>hah</p>");

    使用webpack打包

    webpack

    浏览器打开: 


    四、Loader的三种加载方式

    1.方式一(推荐): 配置文件

    使用配置文件,配置module.loaders

    2.方式二: require

    使用require加载

    vim test.js

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

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>css</title>
        <script src="bundle.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    vim style.css

    body{
        color: #f00;
    }

    接下来使用 webpack 命令来打包:

    webpack test.js bundle.js

    3.方式三: 命令行

    使用命令行加载

    vim test.js

    require("./style.css");
    document.write("hello");

    接下来使用 webpack 命令来打包:

    webpack test.js bundle.js --module-bind 'css=style!css'

    五、常用的Loader

    首先安装对应的loader

    npm install xxx-loader

    1. 解析es6语法为es5

    npm install babel-loader

    vim webpack.config.js

    module.exports = {
        entry: "./main.js",
        output: {
            filename: "babel.js"
        },
        module: {
            loaders: [{
                // 匹配文件格式
                test: /\.js$/,
                // 排除的文件
                exclude: /node_modules/,
                // 需要用到的loader
                loader: "babel-loader"
            }]
        }
    }

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>babel</title>
        <script src="babel.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    vim main.js

    import test from "./test.js";
    // 等同于
    // var test = require("./test.js");
    
    
    document.write(test.fun1());
    document.write(test.fun2());

    vim test.js

    function fun1() {
        return "hello es6<br/>";
    }
    
    function fun2() {
        return "config ok";
    }
    
    module.exports = {
        fun1: fun1,
        fun2: fun2
    }

    使用webpack打包

    webpack

    浏览器打开: 

    2. 使用json-loader解析json数据

    npm install json-loader

    vim webpack.config.js

    module.exports = {
        // 入口文件
        entry: "./main.js",
        output: {
            filename: "bundle.js"
        },
        module: {
            loaders: [{
                test: /\.json$/,
                exclude: /node_modules/,
                loader: "json-loader"
            }]
        }
    }

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>json</title>
        <script src="bundle.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    vim main.js

    // require 引入模块(js/json/css/less/sass/img)
    var test = require("./test.json");
    
    document.write(test.name);
    document.write(test.age);

    vim test.json

    {
        "name": "qzy",
        "age": 20
    }

    使用webpack打包

    webpack

    浏览器打开: 

    3. 使用css-loader和style-loader加载样式

    npm install style-loader css-loader

    vim webpack.config.js

    module.exports = {
        entry: "./main.js",
        output: {
            filename: "bundle.js"
        },
        module: {
            loaders: [{
                test: /\.css$/,
                exclude: /node_modules/,
                loaders: ["style-loader", "css-loader"]
            }]
        }
    }

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>css</title>
        <script src="bundle.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    vim main.js

    var test = require("./test.css");
    
    document.write("hello css-loader");

    vim test.css

    body{
        color: #f00;
    }

    使用webpack打包

    webpack

    浏览器打开: 

    但是注意这样加载的样式是同步加载,必须等html DOM树渲染完毕才能加载css,不像使用style标签引入的css可以异步加载

    4. 使用less-loader编译less文件

    npm install style-loader css-loader less-loader

    vim webpack.config.js

    module.exports = {
        entry: "./main.js",
        output: {
            filename: "bundle.js"
        },
        module: {
            loaders: [{
                test: /\.less$/,
                exclude: /node_modules/,
                loaders: ["style-loader", "css-loader", "less-loader"]
            }]
        }
    }

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>less</title>
        <script src="bundle.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    vim main.js

    var test = require("./test.less");
    
    document.write("hello less-loader");

    vim test.less

    @color : blue;
    
    body{
        color: @color;
        background: #ccc;
    }

    使用webpack打包

    webpack

    5. 使用url-loader加载资源文件

    npm install url-loader

    vim webpack.config.js

    module.exports = {
        entry: "./main.js",
        output: {
            filename: "bundle.js"
        },
        module: {
            loaders: [{
                test: /\.(png|jpg|gif)$/,
                exclude: /node_modules/,
                // limit指定文件大小
                loader: "url-loader?limit=8192"
            }]
        }
    }

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>image</title>
    </head>
    <body>
        <!-- 防止找不到body -->
        <script src="bundle.js"></script>
    </body>
    </html>

    vim main.js

    var img = new Image();
    img.src = require("./icon.png");
    img.width = 500;
    document.body.appendChild(img);

    webpack-icon.png

    使用webpack打包

    webpack

    不光可以解析图片资源,也能解析其他资源文件

    六、使用插件plugins

    插件在 webpack 的配置信息 plugins 选项中指定,用于完成一些 loader 不能完成的工。

    webpack 自带一些插件,你可以可以通过 cnpm 安装一些插件。

    使用内置插件需要通过以下命令来安装:

    cnpm install webpack --save-dev

     1. BannerPlugin

    用于在文件头部输出一些注释信息。

    vim webpack.config.js

    var webpack=require('webpack'); 
    module.exports = {
        entry: "./runoob1.js",    
        output: {
            path: __dirname,        
            filename: "bundle.js"
        },    
        module: {
            loaders: [
              { 
                test: /\.css$/, 
                loader: "style!css" 
              }
            ]
        },    
        plugins:[
            new webpack.BannerPlugin('hello')
        ]};
    }


    然后运行 webpack,打开 bundle.js,可以看到文件头部出现了我们指定的注释信息。

    2. uglifyJsPlugin

    用于压缩js代码

    vim webpack.config.js

    var webpack = require("webpack");
    var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
    
    module.exports = {
        entry: "./main.js",
        output: {
            filename: "bundle.js"
        },
        plugins: [
            new uglifyJsPlugin({
                compress: {
                    warnings: false
                }
            })
        ]
    }

    3. openBrowserPlugin

    webpack 启动后自动打开浏览器插件

    vim webpack.config.js

    var openBrowserPlugin = require("open-browser-webpack-plugin");
    
    module.exports = {
        entry: "./main.js",
        output: {
            filename: "bundle.js"
        },
        plugins: [
            new openBrowserPlugin({
                url: "http://localhost:8080"
            })
        ]
    }

    4. CommonsChunkPlugin

    提取公共代码

    vim webpack.config.js

    var webpack = require("webpack");
    
    module.exports = {
        entry: {
            app: "./main.js",
            vendor: ['jquery'] //所要依赖的模块
        },
        output: {
            filename: "bundle.js"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
        ]
    }

    vim main.js

    var $ = require("jquery");
    
    $("body").html("hello webpack");

    vim index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>CommonsChunkPlugin</title>
        <!-- 公共的模块 -->
        <script src="vendor.js"></script>
        <!-- 自己写的逻辑 -->
        <script src="bundle.js"></script>
    </head>
    <body>
    </body>
    </html>

    参考: 用webpack的CommonsChunkPlugin提取公共代码的3种方式


    七、开发环境

    当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。

    webpack --progress--colors

    如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。

    webpack --progress --colors --watch

    当然,我们可以使用 webpack-dev-server 开发服务,这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

    # 安装
    cnpm install webpack-dev-server -g 
    # 运行
    webpack-dev-server --progress --colors


      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: webpack入门使用方法及个人总结
    本文地址:http://www.xiaoyulive.top/?post=91
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号