Webpack入门

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

新老客户大回馈,云服务器低至5折

(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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用背景图修改radio、checkbox样式

下一篇:北京不下雪,自己来点雪花看看吧~(附效果图)