剑客
关注科技互联网

webpack 先这么用

webpack 先这么用

webpack

介绍

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

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

安装

// 全局安装
npm install webpack -g
// 进入项目,安装到项目依赖中
npm init
npm 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

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址