webpack的安装和动用

首先必要设置 Node.js ,node自带了包管理工科具 npm 。

不过出于npm在境内下载的时候是极慢的,所以那里推荐三个代表npm的淘宝镜像cnpm.之后npm安装请使用cnpm!

命令行安装:

1
$ npm install -g cnpm –registry=https://registry.npm.taobao.org
安装webpack

运用 npm install webpack -g ,webpack全局安装到了当地环境中,就足以行使
webpack 命令了。

在档次中使用webpack

通过 npm init 实例化package.json文件。
通过 npm install webpack –save-dev 安装 webpack 到 package.json
文件中。
还是通过 npm install webpack@1.2.x –save-dev 安装钦点版本的 webpack 到
package.json 文件中。
透过 npm install webpack-dev-server –save-dev 安装 dev tools 到
package.json 文件中,本地运转webpack服务。
怎么利用Webpack
① 、安装 webpack 后,可以运用 webpack 那么些命令行工具。主要命令: webpack
<entry> <output>
。能够切换来含有webpack.config.js的目录运转命令:

webpack 执行一回支付时的编写翻译
webpack -p 执行三遍变动环境的编写翻译(压缩)
webpack –watch 在支付时连连监控增量编译(十分的快)
webpack -d 让她生成SourceMaps
webpack –progress 显示编译进程
webpack –colors 展现静态能源的颜色
webpack –sort-modules-by, –sort-chunks-by, –sort-assets-by
将modules/chunks/assets进行列表排序
webpack –display-chunks 展现编写翻译后的分块
webpack –display-reasons 呈现更加多引用模块原因
webapck –display-error-details 展现越多报错音信
贰 、各种品种下都无法不安排有2个 webpack.config.js ,它的效益就像常规的
gulpfile.js/Gruntfile.js ,正是二个布局项,告诉 webpack 它供给做什么。

上边看3个简练的示范:

复制代码
var webpack = require(‘webpack’);

module.exports = {
    //插件项
    plugins: [
        //提公用js到common.js文件中
        new webpack.optimize.CommonsChunkPlugin(‘common.js’),
        //将样式统一公布到style.css中
        new ExtractTextPlugin(“style.css”, {
            allChunks: true,
            disable: false
        }),
        //使用ProvidePlugin加载使用功能高的模块
        new webpack.ProvidePlugin({
            $: “webpack-zepto”
        })
    ],
    //页面入口文件配置
    entry: {
        index : ‘./src/main.js’
    },
    //入口文件输出配置
    output: {
        path: __dirname +’/dist/’,
        filename: ‘[name].js’
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: ‘style-loader!css-loader’ },
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap’},
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’}
        ]    },
    //别的化解方案计划
    resolve: {
        extensions: [”, ‘.js’, ‘.json’, ‘.scss’],
        alias: {
            filter: path.join(__dirname, ‘src/filters’)
        }
    }
};
复制代码
entry

entry
是页面入口文件配置,可以是一个文本或许八个入口文件,能够是指标格式也许数组格式。

entry: {
    index : ‘./src/main.js’

entry:[‘./src/main.js’,’./src/index.js’] 

output

output 是对应输出项配置,重要回顾 path , filename 和 publishPath 属性。
path 代表输出的路径, filename 代表输出的文件名称, publish帕特h
代表静态财富发布后的前缀地址。

module.loaders

module.loaders 是最注重的一块配置。它报告 webpack
每种文件都须求使用什么加载器来处理。 点击那里能够查阅loader list 。

复制代码
module: {
    //加载器配置
    loaders: [
        //.css 文件使用 style-loader 和 css-loader 来处理
        { test: /\.css$/, loader: ‘style-loader!css-loader’ },
        //.scss 文件使用 style-loader、css-loader 和 sass-loader
来编写翻译处理
        { test: /\.scss$/, loader: ‘style!css!sass?sourceMap’},
        //图片文件使用 url-loader 来处理,小于8kb的平素转为base64
        { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’}
    ]}
复制代码

loader主要有3种选取形式:

一 、在页面里面引用财富采用

require(“url-loader?mimetype=image/png!./file.png”);

② 、在webpack.config.js文件夹中动用

{ test: /.png$/, loader: “url?mimetype=image/png” };

三 、在命令行中编译使用

webpack –module-bind “png=url-loader?mimetype=image/png”;

如上,”-loader”其实是能够大致不写的,多少个loader之间用“!”连接起来。

留意有所的加载器都亟需经过 npm 来加载,并建议查阅它们对应的 readme
来探视怎样使用。

拿最后二个 url-loader
来说,它会将样式中援引到的图纸转为模块来处理,使用该加载器须要先举办安装:

npm install url-loader -save-dev

布署音讯的参数“?limit=8192”表示将装有小于8kb的图样都转为base64格局(其实应该说当先8kb的才使用
url-loader 来映射到文件,不然转为data
url格局)。也能够使用file-loader来加载能源文件。

plugins

plugins 是插件项,那里我们接纳了三个 CommonsChunkPlugin
的插件,它用于提取四个输入文件的集体脚本有的,然后生成3个 common.js
来方便多页面之间展开复用。 点击那里能够查看plugins list 。

复制代码
plugins: [
    //提公用js到common.js文件中
    new webpack.optimize.CommonsChunkPlugin(‘common.js’),
    //将样式统一公布到style.css中
    new ExtractTextPlugin(“style.css”, {
        allChunks: true,
        disable: false
    }),
    //使用ProvidePlugin加载使用频率高的模块
    new webpack.ProvidePlugin({
        $: “webpack-zepto”
    })
]复制代码
如上,包罗三种:

壹 、第三种webpack自带的一对插件: webpack.ProvidePlugin 、
webpack.optimize.CommonsChunkPlugin ,

2、其余一种则透过 npm 包安装的: ExtractTextPlugin 。

resolve

末尾是 resolve 配置,那块很好掌握,直接写注释了:

复制代码
resolve: {
    // require时省略的恢弘名,如:require(‘module’) 不须要module.js
    extension: [”, ‘.js’],
    //别名
    alias: {
        filter: path.join(__dirname, ‘src/filters’)
    }
}
复制代码
使用Webpack-dev-server
webpack-dev-server 是基于node.js Express服务,它同时涵盖了三个基于
Socket.IO 轻量的周转时环境。

复制代码
‘use strict’
var webpack = require(‘webpack’);
var WebpackDevServer = require(‘webpack-dev-server’);
var config = require(‘./webpack.config’);
// 配置代码自动编写翻译和热替换插件
config.entry.unshift(‘webpack-dev-server/client?http://localhost:9090‘,
“webpack/hot/dev-server”);
config.plugins.push(new webpack.HotModuleReplacementPlugin());
// 那里配置:请求http://localhost:9090/index.php,
//
也就是经过地面node服务代办请求到了http://testapi.uhouzz.com/index.php
var proxy = [{
    path: “/index.php/*”,
    target: “http://pc.uhouzz.com“,
    host: “pc.uhouzz.com”
}]//运行服务
var app = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot:true,
    historyApiFallback: true,
    proxy:proxy
});
app.listen(9090);
复制代码

如上,引用 webpack 和 webpack-dev-server
模块,通过WebpackDevServer运维服务,通过 HotModuleReplacementPlugin
插件运行代码自动编写翻译页面自动刷新。那样,当您改改了html、js恐怕样式文件,页面会自动编写翻译刷新。

html页面使用
直白在页面引入 webpack 最后生成的页面脚本和样式文件即可。

复制代码
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <title>webpack test</title>
    <link rel=”stylesheet” href=”/dist/style.css”>
</head>

<body>
    <div id=”app”></div>
    <script src=”/dist/common.js”></script>
    <script src=”/dist/build.js”></script>
</body>
</html>