学习笔记：webpack

时间 2019-11-20 标签学习笔记 webpack

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

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

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

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

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

$ 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　　安装loadergit

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

初步示例：　　（webpack之产出js、css文件，不产出index.html文件。须要另外安装插件： HtmlWebpackPlugin）web

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

index.htmlnpm

<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