首页 > > 网页制作 > css >

Webpack入门

2018-06-24 02:08:39来源：未知阅读 ()

（1）安装webpack

在安装 Webpack 前，你本地环境需要支持 node.js。

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

使用 cnpm 安装 webpack：

cnpm install webpack –g

（2）创建项目

1）创建一个app项目，命令：mkdir app

2）创建一个run00b1.js文件。代码如下：document.write("It works.");
3）添加index.html文件。加入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

4）运行打包命令：webpack runoob1.js bundle.js

5)创建第二个js文件 runoob2.js，添加代码：

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

6）更新runoob1.js文件

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

（3）安装loader模块，来加载css文件，命令：（全局安装需要参数 -g）
cnpm install css-loader style-loader

1） index.css文件
body{background：yellow}

2）修改app/runoob1.js文件
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

3）打包命令：
webpack runoob1.js bundle.js

（4）配置文件，为了便于管理创建webpack.config.js文件

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

（5）插件安装，安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。

命令：cnpm install webpack --save-dev

修改webpack.config.js文件。

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

运行命令：webpack

（6）开发环境

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

webpack --progress –colors

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

webpack --progress --colors --watch

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

webpack --progress --colors –watch

可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

4)安装命令：
# 安装 cnpm install webpack-dev-server -g

# 运行 webpack-dev-server --progress --colors

标签：