webpack 先这么用

webpack 介绍 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应

webpack 先这么用

webpack

介绍

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源;

开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等

安装

// 全局安装npm install webpack -g
// 进入项目,安装到项目依赖中npm initnpm install webpack --save-dev

配置文件

每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js,作为配置项告诉 webpack 如何工作。

默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件

例子:

module.exports = { entry: "./entry.js", output: { path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders: [ { test: //.css$/, loader: "style!css" } ] }};

Loader

Loader 用于预处理文件

使用方式

  • 通过 require 指定

  • webpack.config.js 中配置

  • 命令行执行

插件 Plugins

通过插件可以添加特定功能

  • 内嵌插件

  • 第三方插件

DefinePlugin

内嵌插件,无需安装

用于在编译期间定义常量

使用

例子:

new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify("5fa3b9"), BROWSER_SUPPORTS_HTML5: true, TWO: "1+1", "typeof window": JSON.stringify("object")})

copy-webpack-plugin

拷贝资源插件

官方这样解释 Copy files and directories in webpack ,在 webpack 中拷贝文件和文件夹

https://github.com/kevlened/c...

安装

npm install --save-dev copy-webpack-plugin

使用

new CopyWebpackPlugin([patterns], options)

web pack.config.js 中添加:

var CopyWebpackPlugin = require("copy-webpack-plugin");module.exports = { plugins: [ ... new CopyWebpackPlugin([{ from: __dirname + '/src/index.html', to: __dirname + '/dist' }]), ... ]}

配置项

clean-webpack-plugin

删除编译资源

在编译前,删除之前编译结果目录或文件

https://github.com/johnagan/c...

安装

npm install clean-webpack-plugin --save-dev

使用

web pack.config.js 中添加:

var CleanPlugin = require("clean-webpack-plugin");module.exports = { ... plugins: [ ... new CleanPlugin(['dist', 'build']), ... ] ...}

distbuild 为需要删除资源

html-webpack-plugin

自动生成html插件

生成 HTML5 文件并注入 webpack 绑定的一系列 js & css,生成对应 <script><link> 标签

https://github.com/ampedandwi...

安装

npm install html-webpack-plugin --save-dev

使用

web pack.config.js 中添加:

var HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { ... plugins: [ ... new HtmlWebpackPlugin({ filename: 'index.html', template:'./src/template.html', }) ... ] ...}

配置项

filename: 生成文件名称,默认 index.html

template: 模版文件目录及名称

注意

此插件会受到 file-loader 的影响

扩展工具

atool-build

基于 webpack 构建封装

集成了一些常用的 loaders 与 plugins

安装

npm i atool-build -g

参考

http://webpack.github.io/

http://ant-tool.github.io/

Fabs

未登录用户
全部评论0
到底啦