webpack入门第四篇

今天到了第四篇的时间，貌似没有多少粉丝关注我，哈哈，希望有多多的粉丝关注。好了，废话少说。
前三篇都是直接运用webpack命令运行，但是对于一个项目来说，这样做太繁琐了，最希望做的就是一句简单的命令就可以实现。那么wenpack给了一种方案，那就是用配置文件的方式。还是附上官网的链接。http://webpack.github.io/docs/tutorials/getting-started/。
下面跟着官网一步步做吧。
1、新建文件夹demo3，进入demo3，按住shift，点击右键，弹出命令行
2，输入命令，把我们前面讲的的loader安装上

npm install css-loader style-loader

3，新建文件，webpack.config.js,配置文件上

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

4，把demo2里的文件复制过来，当然你也也可以直接在demo2里直接操作，这里为了只看这篇博客的人做的，不用再往前翻就可以明白。并且已经说明你已经不需要看前面的了，这里直接粘贴代码。
新建文件 content.js

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

新建文件entry.js

require("!style-loader!css-loader!./style.css");
document.write(require("./content.js"));

新建文件index.html

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

新建文件style.css

body {
    background: yellow;
}

5、那么下面又是webpack的时间到了，在命令行里输入

webpack

是不是简单多了，只需要一句命令就好。
6、运行index.html查看结果。好了，我这测试已经成功了，你的呢。

下面一起学习一下配置文件webpack.config.js里的东西，相信爱学习的你，肯定也想把他弄明白，好了，我们来看看。
每一句都有我的解释，当然只是我自己的理解，如果有不对的，可以评论，或者私信我们讨论。分享我们的知识。

module.exports = {
    //entry入口的意思，也就是入口文件是entry.js
    entry: "./entry.js",
    //output出口的意思，也就是webpack出口文件。__dirname是node.js的全局变量，代表当前目录的根目录。最后生成的文件就是bundle.js
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    //module,英文意思模块，在这里是需要的加载的loader。/\.css$/是正则表达式，匹配.css结尾的文件
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

总觉发明webpack的这个哥们，应该挺聪明的，哈哈，他让事情变得越来越简单了，那么既然可以直接用webpack命令，那是不是可以用npm，直接用node的命令呢？比如说，直接输入，npm start项目就运行了，这样多好。后面，我们可以一起研究一下这种更让人喜欢的方式。
如果对你有帮助，就点个赞吧。

猜你喜欢