http://wiki.jikexueyuan.com/project/webpack-handbook/  Webpack 中文指南

http://www.itzjt.cc/2017/04/09/webpack/  webpack构建工具(参考)2017-11-27

http://blog.csdn.net/chenqiuge1984/article/details/53009352  webpack PK fis

https://www.webpackjs.com/concepts/  webpack中文文档  2019-7-26

https://www.cnblogs.com/star-wind/p/11254972.html  2019-7-27

$ cnpm install webpack -g
# 此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。
$ webpack -h # 进入项目目录
# 确定已经有 package.json,没有就通过 npm init 创建
# 安装 webpack 依赖
$ cnpm install webpack --save-dev # 查看 webpack 版本信息
$ cnpm info webpack # 安装指定版本的 webpack
$ cnpm install webpack@1.12.x --save-dev # 如果需要使用 Webpack 开发工具,要单独安装:
$ cnpm install webpack-dev-server --save-dev

cnpm install -g css-loader style-loader  安装loader


http://wiki.jikexueyuan.com/project/webpack-handbook/usage.html

初步示例:  (webpack之产出js、css文件,不产出index.html文件。需要另外安装插件:  HtmlWebpackPlugin)

创建一个静态页面 index.html 和一个 JS 入口文件 entry.js

index.html

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

entry.js

document.write('It works.')

然后编译 entry.js 并打包到 bundle.js:

$ webpack entry.js bundle.js

用浏览器打开 index.html 将会看到 It works. 。

第二步示例:

接下来添加一个模块 module.js 并修改入口 entry.js:

module.js

module.exports = 'It works from module.js.'

entry.js

document.write('It works.')
document.write(require('./module.js')) // 添加模块

重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。

Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。


 Loader

Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

npm install css-loader style-loader    #安装 loader

如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader。 将 entry.js 中的 require("!style!css!./style.css") 恢复为 require("./style.css")

$ webpack entry.js bundle.js --module-bind 'css=style!css'

配置文件:

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

http://wiki.jikexueyuan.com/project/webpack-handbook/configuration.html

  • package.json  在根目录创建 package.json 来添加 webpack 需要的依赖  (例: https://github.com/owenliang/react-webpack2/blob/master/package.json)
  • 运行 npm install
  • webpack.config.js  然后创建一个配置文件 webpack.config.js  (例:https://github.com/owenliang/react-webpack2/blob/master/webpack.config.js)
  • webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的

插件:

插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。

修改 webpack.config.js,添加 plugins:

var webpack = require('webpack')
module.exports = {
entry: './entry.js', //入口文件
output: { //输出
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [ //loader
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [ //插件
new webpack.BannerPlugin('This file is created by zhaoda')
]
}

开发环境:

# webpack 的编译的输出内容带有进度和颜色。
$ webpack --progress --colors # 编译改为监听模式
$ webpack --progress --colors --watch

使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装
$ npm install webpack-dev-server -g # 运行
$ webpack-dev-server --progress --colors

故障处理:

# 打印错误详情
$ webpack --display-error-details

..

学习笔记:webpack的更多相关文章

  1. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  4. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  5. Webpack4 学习笔记一初探Webpack

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 打包文件 支持JS模块化 模式: production(0配置默认), development(生产环境) 更详细的 ...

  6. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  7. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. 【原】redux异步操作学习笔记

    摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...

  10. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

随机推荐

  1. 记一次揪心的MySQL数据恢复过程

    https://blog.csdn.net/poxiaonie/article/details/78304699 === 先说下背景,公司其中一个项目所有服务都部署在客户的机房内,机房较小,没有UPS ...

  2. solr4.9+tomcat7 multiCore

    ES不支持groupby,于是想看看solr怎么实现的. 搭建环境: 1)下载tomcat7.solr4.9,解压: 2)配置tomcat7的端口和URIEncoding(utf-8): 3)拷贝so ...

  3. elasticsearch 口水篇(8)分词 中文分词 ik插件

    先来一个标准分词(standard),配置如下: curl -XPUT localhost:9200/local -d '{ "settings" : { "analys ...

  4. Android adb logcat输出日志显示不全解决方案

    在终端中使用adb logcat打印服务器json数据,如果返回数据过大超过4000字节(4K)即会截断不显示 原因:logcat在对于message的内存分配大概是4k左右.所以超过的内容都直接被丢 ...

  5. HTML+CSS补充

    1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...

  6. JS中模态窗口(showModalDialog)的详细使用

    基本介绍: showModalDialog() (IE + 支持) showModelessDialog() (IE + 支持) window.showModalDialog() 方法用来创建一个显示 ...

  7. 点击input触发弹出框的bug

    先点击第一个input建立弹出框,再点击第二个input打开弹出框,操作点击,同时触发了两个input点击事件.主要原因是建立弹出框时绑定了input1的click事件,再次触发时,又再亿次绑定了in ...

  8. Scrapy学习篇(三)之创建项目和Scrapy的安装

    安装Scrapy 了解了Scrapy的框架和部分命令行之后,创建项目,开始使用之前,当然是安装Scrapy框架了. 关于Scrapy框架的安装,请参考:https://cuiqingcai.com/5 ...

  9. 安装httpd服务配置

    本地yum源安装 mkdir /opt/dvd   (先用mkdir去根下opt目录下建一个名字叫dvd的目录) mount /dev/sr0   /opt/dvd  (用mount命令,挂载光盘设备 ...

  10. Java项目配置redis

    成功配置redis之后,便来学习使用redis.首先了解下redis的数据类型. Redis的数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set( ...