请选择 进入手机版 | 继续访问电脑版

技术控

    今日:6| 主题:57274
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] webpack 先这么用

[复制链接]
汉子你别跑丫 发表于 2016-10-5 13:41:03
258 2

webpack 先这么用

webpack 先这么用-1-技术控-配置文件,require,style,图片,开发

  webpack

   介绍
  Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源;
  开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等
  安装

  1. // 全局安装
  2. npm install webpack -g
复制代码
  1. // 进入项目,安装到项目依赖中
  2. npm init
  3. npm install webpack --save-dev
复制代码
配置文件

  每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js,作为配置项告诉 webpack 如何工作。
   默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件
  例子:
  1. module.exports = {
  2.     entry: "./entry.js",
  3.     output: {
  4.         path: __dirname + "/dist",
  5.         filename: "bundle.js"
  6.     },
  7.     module: {
  8.         loaders: [
  9.             { test: /\.css$/, loader: "style!css" }
  10.         ]
  11.     }
  12. };
复制代码
Loader

  Loader 用于预处理文件
  使用方式

  
       
  •   通过 require 指定
       
  • webpack.config.js 中配置
       
  • 命令行执行
      
  插件 Plugins

     通过插件可以添加特定功能
   
       
  • 内嵌插件
       
  • 第三方插件
       
    DefinePlugin

  内嵌插件,无需安装
  用于在编译期间定义常量
  使用

  例子:
  1. new webpack.DefinePlugin({
  2.     PRODUCTION: JSON.stringify(true),
  3.     VERSION: JSON.stringify("5fa3b9"),
  4.     BROWSER_SUPPORTS_HTML5: true,
  5.     TWO: "1+1",
  6.     "typeof window": JSON.stringify("object")
  7. })
复制代码
copy-webpack-plugin

  拷贝资源插件
   官方这样解释 Copy files and directories in webpack ,在 webpack 中拷贝文件和文件夹
   https://github.com/kevlened/c...
  安装

  1. npm install --save-dev copy-webpack-plugin
复制代码
使用

  new CopyWebpackPlugin([patterns], options)
   在 web pack.config.js 中添加:
  1. var CopyWebpackPlugin = require("copy-webpack-plugin");
  2. module.exports = {
  3.      plugins: [
  4.          ...
  5.           new CopyWebpackPlugin([{
  6.             from: __dirname + '/src/index.html',
  7.             to: __dirname + '/dist'
  8.         }]),
  9.          ...
  10.      ]
  11. }
复制代码
配置项

  clean-webpack-plugin

  删除编译资源
  在编译前,删除之前编译结果目录或文件
   https://github.com/johnagan/c...
  安装

  1. npm install clean-webpack-plugin --save-dev
复制代码
使用

   在 web pack.config.js 中添加:
  1. var CleanPlugin = require("clean-webpack-plugin");
  2. module.exports = {
  3.     ...
  4.      plugins: [
  5.          ...
  6.              new CleanPlugin(['dist', 'build']),
  7.          ...
  8.      ]
  9.     ...
复制代码
  dist 与 build 为需要删除资源
  html-webpack-plugin

     自动生成html插件
    生成 HTML5 文件并注入 webpack 绑定的一系列 js & css,生成对应 <script> 及 <link> 标签
   https://github.com/ampedandwi...    安装

  1. npm install html-webpack-plugin --save-dev
复制代码
使用

   在 web pack.config.js 中添加:
  1. var HtmlWebpackPlugin = require("html-webpack-plugin");
  2. module.exports = {
  3.     ...
  4.      plugins: [
  5.          ...
  6.              new HtmlWebpackPlugin({
  7.                   filename: 'index.html',
  8.                 template:'./src/template.html',
  9.                 })
  10.          ...
  11.      ]
  12.     ...
复制代码
配置项

  filename: 生成文件名称,默认 index.html
  template: 模版文件目录及名称
  注意

  此插件会受到 file-loader 的影响
  扩展工具

  atool-build

  基于 webpack 构建封装
  集成了一些常用的 loaders 与 plugins
  安装

  1. // 进入项目,安装到项目依赖中
  2. npm init
  3. npm install webpack --save-dev0
复制代码
参考

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



上一篇:Sourcegraph provides intelligent searches of Go language code
下一篇:来自天国的 kubernetes
wxfdg 发表于 2016-10-15 11:52:05
学习下
回复 支持 反对

使用道具 举报

chailijia 发表于 2016-11-15 07:08:42
永远有多远?你小子就给我滚多远。
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表