webpacke   安装

首先要安装 Node.js, Node.js 自带了软件包管理器 npm
 用npm 安装webpack

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 查看相关指令
通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack

//进入项目目录
//确定已有package.json,没有就npm init 创建
$ npm install webpack --save-dev //查看webpack 版本信息
$ npm info webpack
//安装指定版本
$ npm install webpack@1.31.x --save-dev

webpacke 使用

1、安装 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 它需要做什么。

下面看一个简单的示例:

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 代表输出的文件名称, publishPath 代表静态资源发布后的前缀地址。

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种使用方式:

1、在页面里面引用资源使用

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

    2、在webpack.config.js文件夹中使用

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

    3、在命令行中编译使用

  • 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 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 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"
})
]

如上,包含两种:

1、第一种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>

webpacke的更多相关文章

  1. webpacke踩坑-新手

    1.题叶-webpack入门指南 2.webpack入门系列 3.w3ctech的webpack入门及实践 4.Express结合Webpack的全栈自动刷新 5.webpack 单页面应用实战 6. ...

  2. webpacke install vue application 报错 Failed at the phantomjs-prebuilt@2.1.14 install script

    刚刚在网上下了个开源的项目: https://github.com/ing670/webappkiller 执行npm install 报错:npm ERR! Failed at the phanto ...

  3. MVC,MVVM,MVP的区别/ Vue中忽略的知识点!

    按照顺序学习: https://scotch.io/courses/build-an-online-shop-with-vue/hello-world Vue Authentication And R ...

  4. webpack前端模块打包器

    webpack前端模块打包器 学习网址: https://doc.webpack-china.org/concepts/ http://www.runoob.com/w3cnote/webpack-t ...

随机推荐

  1. Process management of windows

    igfxem.exe进程是正常的进程.是intel家的核显驱动类的进程.核显即"核芯显卡",是指GPU部分它是与CPU建立在同一内核芯片上,两者完全融合的芯片."核芯显卡 ...

  2. 235D Graph Game

    传送门 题目大意 https://www.luogu.org/problemnew/show/CF235D 分析 我们先考虑它是树的情况 我们设$event(x,y)$表示删除点x是y与x联通这件事对 ...

  3. 福大软工1816|K班—alpha冲刺

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 了解前端方面的相关内容,便于后续对进 ...

  4. Diameter协议摘要

    ---------选择同学整理文档 1.   协议概述 Diameter协议主要为应用程序提供认证.鉴权.计费框架,即AAA,并支持本地AAA和漫游场景下的AAA. 1.1.  特点介绍 以前的AAA ...

  5. (转)Linux环境进程间通信系列(五):共享内存

    原文地址:http://www.cppblog.com/mydriverc/articles/29741.html 共享内存可以说是最有用的进程间通信方式,也是最快的 IPC 形式.两个不同进程 A ...

  6. PLSA的EM推导

    本文作为em算法在图模型中的一个应用,推导plsa的em算法. 1 em算法 em算法是解决一类带有隐变量模型的参数估计问题. 1.1 模型的定义 输入样本为,对应的隐变量为.待估计的模型参数为,目标 ...

  7. 20165219 2017-2018-2 《Java程序设计》第5周学习总结

    20165219 2017-2018-2 <Java程序设计>第5周学习总结 课本知识总结 第7章 内部类与异常类 一 1 内部类:类的一种成员 2 外嵌类:包含内部类的类称为内部类的外嵌 ...

  8. Balance(Stack)

    栈的运用 mooc视频连接 #include <iostream> using namespace std; ]; ; void Push(char c) { ) { Top = ; S[ ...

  9. 1232: 买不到的数目 [DP、数学]

    1232: 买不到的数目 [DP.数学] 时间限制: 1 Sec 内存限制: 128 MB 提交: 21 解决: 10 统计 题目描述 小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的 ...

  10. javascript正则表达式——元字符

    元字符(Metacharacter)是拥有特殊含义的字符: 元字符        描述 (1)   .             查找单个字符,除了换行和行结束符. 例子: <!DOCTYPE h ...