[提高总结七]webpack练习1

最新推荐文章于 2022-09-27 17:36:05 发布

灵眼儿上方

最新推荐文章于 2022-09-27 17:36:05 发布

阅读量363

点赞数

分类专栏： WEB 文章标签： web pack

本文链接：https://blog.csdn.net/liyanq528/article/details/62221858

版权

WEB 专栏收录该内容

38 篇文章 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

灵眼儿上方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[提高总结七]webpack练习1

1，实现了web pack的基本用法，能打包应用，管理源码。2，实现了css-loader，style-loader，json-loader的效果。3，实现了web pack-dev-server的使用，能够实时刷新效果，这个很赞啊。webpack.json{ "name": "learnwebpack", "version": "1.0.0", "descriptio
复制链接

扫一扫