WebPack使用流程小记

版权声明:本文为博主许佳佳原创文章,转载请务必注明出处。 https://blog.csdn.net/Double2hao/article/details/78533447

本篇文章记录为主
主要参考WebPack官网:http://webpack.github.io/docs/

WebPack常用流程

1、安装WebPack
2、准备要打包的文件
3、安装loader
4、配置文件
5、生成文件并运行

示例

文件目录(WebStorm)

这里写图片描述

安装WebPack

npm install webpack -g

准备要打包的文件

entry.js

require("./style.css");
document.write('It works.');

index.js

<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;
}

安装loader

npm install css-loader style-loader

配置文件

webpack.config.js

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

生成文件并运行

直接在终端输入

webpack

然后运行index.html,最终效果如下:
这里写图片描述

猜你喜欢

转载自blog.csdn.net/Double2hao/article/details/78533447