[提高总结七]webpack练习1

朱雀 2022-09-29 06:34 115阅读 0赞

1，实现了web pack的基本用法，能打包应用，管理源码。

2，实现了css-loader，style-loader，json-loader的效果。

3，实现了web pack-dev-server的使用，能够实时刷新效果，这个很赞啊。

webpack.json

{
      "name": "learnwebpack",
      "version": "1.0.0",
      "description": "学习webpack",
      "main": "index.js",
      "scripts": {
        "start": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "灵眼儿上方",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^0.27.3",
        "json-loader": "^0.5.4",
        "style-loader": "^0.13.2",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.4.2"
      }
    }

web pack.config.js

/**webpack配置文件
     * Created by liyanq on 17/3/14.
     *      Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins）;
     * 这些功能其实都可以通过命令行模式实现，但是正如已经提到的，这样不太方便且容易出错的.
     * 一个更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，
     * 可以把所有的与构建相关的信息放在里面
     *       Loaders是webpack中最让人激动人心的功能之一了。
     * 通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，
     * 比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。
     * 或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
     *       Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：
     * test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
     * loader：loader的名称（必须）
     * include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
     * query：为loaders提供额外的设置选项（可选）
     */
    
    /**
     * */
    var webpack = require("webpack");
    module.exports = {
        devtool: "source-map",//调试的时候使用
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/public",//打包后的文件存放的地方
            filename: "bundle.js"//打包后输出文件的文件名，可以写成"[name]-[hash].js"
        },
        module: {
            loaders: [{
                test: /\.json$/,
                loader: "json-loader"
            },{
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }]
        },
        devServer: {//配置webpack-dev-server选项
            contentBase: "./public",//本地服务器所加载的页面所在的目录。
                                    //效果和webpack-dev-server --content-base ./public一样～
            historyApiFallback: true,//不跳转
            inline: true//实时刷新
        },
        plugins: [
            new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在这个数组中new一个就可以了
        ]
    };

./app/greeter.js

/**
     * Created by liyanq on 17/3/14.
     */
    
    var jsonFile = require("./hello.json");
    
    module.exports = function() {
        var greet = document.createElement('div');
        greet.textContent = jsonFile["greetingText"];
        var h1 = document.createElement("h1");
        h1.innerHTML = "g来自服务器的自动更新";
        h1.className = "h1";
        greet.appendChild(h1);
        return greet;
    };

./app/hello.json

{
      "greetingText":"我是来自json文件的问候语"
    }

./app/main.js

/**
     * Created by liyanq on 17/3/14.
     */
    var greeter = require('./Greeter.js');
    var cssFile = require("./testCssFile.css");
    document.getElementById('root').appendChild(greeter());

./app/testCssFile.css

body{
        background-color: burlywood;
    }
    .h1{
        color: blue;
    }

./public/index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试webpack</title>
    </head>
    <body>
    <div id="root">
    
    </div>
    <script src="bundle.js"></script>
    </body>
    </html>

还有许多功能没试验，如loaders,babel,plugin,react,jsx,es6...

来源：http://blog.csdn.net/kun5706947/article/details/52596766![Center][]

[Center]: /images/20220708/3138c26958044465a4bc36d2ccce665f.png